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

筆記說明

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

一、概括

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

二、解析代碼 2.1、詞（token）是如何被拆分的

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

接下拆解下面代碼：

text text text

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

class=“a” 屬性

> “標(biāo)簽開始”的結(jié)束

text text text 文本

標(biāo)簽結(jié)束

關(guān)于token的解釋：

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

2.2、狀態(tài)機 2.2.1、過程

把部分詞（token）的解析畫成一個狀態(tài)機：

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

狀態(tài)機的初始狀態(tài)，我們僅僅區(qū)分 “< ”和 “非 <”：

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

如果獲得的是一個 < 字符，那么進入一個標(biāo)簽狀態(tài)

可能會遇到的情況：

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

如果下一個字符是 “ / ”，那么可以確定進入了一個結(jié)束標(biāo)簽

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

如果我們要完整處理各種 HTML 標(biāo)準(zhǔn)中定義的東西，那么還要考慮 “ ? ” “ % ”等內(nèi)容

2.2.2、代碼化

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