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

筆記說(shuō)明

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

一、概括

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

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

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

接下拆解下面代碼：

text text text

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

class=“a” 屬性

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

text text text 文本

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

關(guān)于token的解釋?zhuān)?/p>

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

2.2、狀態(tài)機(jī) 2.2.1、過(guò)程

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

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

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

如果獲得的是一個(gè)非 < 字符，那么可以認(rèn)為進(jìn)入了一個(gè)文本節(jié)點(diǎn)

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

可能會(huì)遇到的情況：

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

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

如果下一個(gè)字符是字母，那么可以確定進(jìn)入了一個(gè)開(kāi)始標(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=="