感謝老莊（@莊表偉）、耗子叔（@左耳朵耗子）、貘大（@貘吃饃香）的鞭策，使得我有勇氣開始這個系列。
還有感謝@玉面小飛魚妹紙的提問，這是我的文收到的僅有的認真回覆，我一定努力快點把這系列寫到布局的部分回答你的問題……
從現在開始我們來扮演瀏覽器。
對我們來說html其實首先是一坨字串。
為了把字元流解析成正確的dom結構，我們需要做的事情分為兩步：
html結構不算太複雜，我們需要90%的token大約只有標籤開始、屬性、標籤結束、注釋、cdata節點。
現在我們來看看這些token都長啥樣子：
根據這樣的分析，現在我們開始從字元流讀取字元，嗯假設是《的話，我們一下子就知道這不是乙個文字節點啦！
之後再讀乙個字元，比如就是 x,那麼一下子就知道又不是注釋和cdata了，接下來我們就一直讀，直到遇到》或者空格，就得到了乙個完整的token了。
那麼實際上我們每讀入乙個字元，都要做一次決策，而且這些決定跟「當前狀態」有關。這是乙個典型的狀態機場景。
在稍微後面的部分，可以找到狀態機的狀態轉移圖。
（這裡我希望再次強調下，狀態機真的是一種沒有辦法封裝的東西，永遠不要試圖封裝狀態機。）
圖上的data狀態大概就像這樣吧：
var data = function(c)
if(c=="<")
else if(c=="\0")
else if(c==eof)
else
};
function htmllexicalparser()
function tagopen()
// ……
var state = data;
this.receiveinput = function(char)
}
parse
稍微乾淨的**在這個gist可以看到。
這些**僅僅希望展示html的解析原理，略去了大部分的html狀態，如果你想要完整實現html的詞法，w3c的規範已經很貼心地把整個的狀態機都給你定義好了。
瀏覽器位址列背後的logic
曾經有面試題是這樣的 描述在瀏覽器的位址列中輸入 後發生了什麼？1 服務端返回baidu頁面資源，瀏覽器載入html 2 瀏覽器開始解析 3 發現link，傳送請求載入css檔案 4 瀏覽器渲染頁面 5 發現，傳送請求載入，並重新渲染 6 傳送請求js檔案，阻塞渲染。如果js對dom進行了操作，則會...
瀏覽器輸入URL按回車背後的經歷
當我們在瀏覽器的位址列輸入 www.cnblogs.com 然後回車，回車到看到頁面到底發生了什麼呢？網域名稱解析 發起tcp的3次握手 建立tcp連線後發起http請求 伺服器響應http請求，瀏覽器得到html 瀏覽器解析html 並請求html 中的資源 如js css 等 瀏覽器對頁面進行渲...
瀏覽器是如何執行HTML的？
什麼是網頁 網頁 html page 是在瀏覽器 browser 上執行並且可以與使用者產生互動的應用程式。此圖為瀏覽器執行html 這個想說明什麼呢 1.網頁呢實際上就是乙個按照某種格式，字元 組成的乙個檔案 html document 2.這個檔案是由html tag,css樣式，js 構成的，...