走進瀏覽器內部—剖析瀏覽器是如何工作的（上）
最近工作需要一直在和瀏覽器打交道。每天都為如何解決那些瀏覽器間的相容性而困擾。時間長了自然而然對瀏覽器也產生了感情。準備學習學習，自己寫個瀏覽器。為此開始學習了 Rust，一門用於寫底層，但看上去又像高階語言的語言。希望 Rust 能有美好的明天，我也跟著受益。
想了想，要寫瀏覽器，首先應該瞭解一下瀏覽器內部機制。今天先放下程式碼，帶大家一起走進瀏覽器，看看瀏覽器是如何將網頁呈現給您的。
繫結：使用系統級別的 API，將記憶體中點陣圖繪製到指定視窗（標籤對應的網頁檢視）上。
渲染：解析 html 和 css 生成渲染樹，將合併後，將渲染樹繪製到螢幕上呈現給使用者。
平臺：相容（適配）到不同的作業系統
javascript VM ：以後單講，準備寫個demo
首先將 HTML 和 CSS 解析為一定的資料結構（渲染物件），然後再將渲染物件按一定規則（就是將 style 樹 合併到 dom 樹上）形成渲染樹，接下來對生成渲染樹各個節點進行佈局（也就是按 dom 節點的位置資訊進行排版），最後讀取渲染樹，繪製成圖片放到螢幕上。
HTML 的解析
首先瀏覽器是以超強糾錯形式來解析 html，即便 html 有錯誤，瀏覽器也相對智慧地將 html 進行解析，所以說對 html 的解析不是一般簡單解析工作，html 解析要相對複雜。在解析過程是可以被 js 或其他原因所中斷的。例如網路不暢通，link 和 style 標籤載入，相對高階的瀏覽器為提高效率，提供一定程序進行預解析，也可以載入圖這樣耗時的工作可以另一個程序中完成
Parser 和 Tokenizer 其實只是把無意義的字元流變得有某種意義而已。Parse 這個詞其實可以用在很多的地方，比如說只要你能在一個字元流中標識出所有的字元 a，你就在做 Tokenize 和 Parse。你可以看得出，Parse 和 Tokenize 有多難實際是針對程式設計的人的目的來說的。
一般解析完了這種形式
html
|-----head
-----body
|--- p. wat
| #text
---- div
---- span
---- #text
HTMLHtmlElement
|-----HTMLHeadElement
-----HTMLBodyElement
|--- HTMLParagraphElement
| ----Text
---- HTMLDivElement
---- HTMLSpanElement
---- Text
下面例子只為說明瀏覽器解析 html 時的糾錯能力，html 中錯誤顯而易見，我就不一一指出了。
javascript 是可以介入 html 解析過程中，如下圖。
