摘要：狀態遷移代碼所謂的狀態遷移，就是當前狀態函數返回下一個狀態函數。狀態函數通過代碼中的函數來輸出解析好的詞，我們只需要覆蓋，即可指定對解析結果的處理方式。詞法分析器代碼狀態函數們至此，字符流被拆成詞。

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

本文主要聊聊瀏覽器如何解析請求回來的 HTML 代碼以及 DOM 樹又是如何構建的。

“詞”（指編譯原理的術語 token，表示最小的有意義的單元），種類大約只有 標簽開始、屬性、標簽結束、注釋、CDATA節點幾種。

接下拆解下面代碼：

text text text

這段代碼依次拆成詞（token）：

class=“a” 屬性

> “標簽開始”的結束

text text text 文本

關于token的解釋：

從 HTTP 協議收到的字符流讀取字符。每讀入一個字符，其實都要做一次決策，而且這些決定是跟“當前狀態”有關的。把字符流解析成詞（token），最常見的方案就是使用狀態機。

把部分詞（token）的解析畫成一個狀態機：

具體的可以參考HTML官方文檔

狀態機的初始狀態，我們僅僅區分 “< ”和 “非 <”：

如果獲得的是一個非 < 字符，那么可以認為進入了一個文本節點

如果獲得的是一個 < 字符，那么進入一個標簽狀態

可能會遇到的情況：

比如下一個字符是“ ! ” ，那么很可能是進入了注釋節點或者 CDATA節點

如果下一個字符是 “ / ”，那么可以確定進入了一個結束標簽

如果下一個字符是字母，那么可以確定進入了一個開始標簽

如果我們要完整處理各種 HTML 標準中定義的東西，那么還要考慮 “ ? ” “ % ”等內容

// 初始狀態
var data = function(c){
    if(c=="&") {
        return characterReferenceInData;
    }
    if(c=="<") {
        return tagOpen;
    }
    else if(c=="