最近看了< webkit技術(shù)內(nèi)幕 >，雖然并不能完全看懂，但是對瀏覽器的渲染機制也算是有了一個比較完整的認(rèn)識。
我們從瀏覽器地址欄輸入網(wǎng)址開始到web頁面被完整的呈現(xiàn)在眼前，大概的經(jīng)過了這樣一個過程：網(wǎng)址被DNS解析為IP地址 -> 通過IP地址建立TCP連接 -> 發(fā)送HTTP請求 -> 服務(wù)器處理請求并返回響應(yīng) -> 瀏覽器解析渲染頁面 -> 斷開TCP連接
可是瀏覽器是怎么去解析渲染頁面的呢？這里就要涉及到瀏覽器的內(nèi)核，也就是瀏覽器的渲染引擎（嚴(yán)格來說應(yīng)該是渲染引擎 + Javascript引擎），頁面的渲染工作便是由渲染引擎完成的。需要注意瀏覽器和瀏覽器內(nèi)核是不同的概念，瀏覽器指的是 Chrome、Firefox 等，而瀏覽器內(nèi)核則是 Blink、Gecko 等，瀏覽器內(nèi)核只負(fù)責(zé)渲染，GUI 及網(wǎng)絡(luò)連接等跨平臺工作則是瀏覽器實現(xiàn)的。主流的渲染引擎包括Trident、Gecko、Webkit，它們分別是IE、火狐和Chrome的內(nèi)核（2013年，Google宣布了Blink內(nèi)核，它其實是從Webkit復(fù)制出去的）。一般渲染引擎主要包括HTML解釋器、CSS解釋器、Javascript引擎、布局、繪圖等模塊。當(dāng)然這些模塊還依賴很多其他的基礎(chǔ)模塊。
我們先簡單的了解一下渲染引擎各個主模塊所做的工作（以下所有的介紹以 webkit 為介紹對象）
HTML解釋器 ：HTML解釋器的工作就是將網(wǎng)絡(luò)或者本地磁盤獲取到的HTML網(wǎng)頁和資源從字節(jié)流解釋成DOM樹的結(jié)構(gòu)（首先是字節(jié)流，經(jīng)過解碼之后是字符流，然后通過詞法分析器會被解釋成詞語（TOKENS），經(jīng)過語法分析器構(gòu)建成節(jié)點，最后這些節(jié)點被組建成一顆DOM樹）
CSS解釋器 ：CSS字符串被CSS解釋器處理后變成渲染引擎的內(nèi)部規(guī)則表示。（樣式規(guī)則建立完成之后，webkit會保存規(guī)則結(jié)果，當(dāng)DOM的節(jié)點建立之后，webkit會為可視化節(jié)點選擇合適的樣式信息，即作樣式規(guī)則匹配）
Javascript引擎 ：將Javascript代碼處理并執(zhí)行，一個Javascript引擎可以包括以下幾個部分 ->
