摘要：瀏覽器內(nèi)核又叫渲染引擎，主要負(fù)責(zé)的解析，頁(yè)面布局渲染與復(fù)合層合成。頁(yè)面呈現(xiàn)原理規(guī)范定義了的詞法及語(yǔ)法文法。解析器使用和解析生成器從語(yǔ)法文件中自動(dòng)生成解析器。回憶一下解析器的介紹，創(chuàng)建一個(gè)自底向上的解析器，使用自頂向下解析器。

瀏覽器內(nèi)核又叫渲染引擎，主要負(fù)責(zé) HTML、CSS 的解析，頁(yè)面布局、渲染與復(fù)合層合成。瀏覽器內(nèi)核的不同帶來(lái)的主要問(wèn)題是對(duì) CSS 的支持度與屬性表現(xiàn)差異。

Wekbit是一個(gè)開(kāi)源的Web瀏覽器引擎，也就是瀏覽器的內(nèi)核。Apple的Safari, Google的Chrome, Nokia S60平臺(tái)的默認(rèn)瀏覽器，Apple手機(jī)的默認(rèn)瀏覽器，Android手機(jī)的默認(rèn)瀏覽器均采用的Webkit作為器瀏覽器內(nèi)核

Blink是在Wekbit的基礎(chǔ)上的改進(jìn)，是現(xiàn)在對(duì)新特性支持度最好的內(nèi)核

Firefox

微軟的IE，IE4+ 的內(nèi)核，一直持續(xù)到 IE11，EdgeHTML 是微軟拋棄 IE 后開(kāi)發(fā)的全新內(nèi)核

webkit 包含了許多不同平臺(tái)對(duì)webkit封裝的實(shí)現(xiàn)，即抽象出了與瀏覽器所能直接對(duì)應(yīng)的一些概念的實(shí)現(xiàn)。如，WebView, WebPage, WebFrame等

WebCore 實(shí)現(xiàn)了對(duì)文檔的模型化，包括了CSS，DOM，Render等的實(shí)現(xiàn)

JavaScript Core 對(duì)JavaScript支持的實(shí)現(xiàn)

JavaScript 負(fù)責(zé) JavaScript 代碼的解釋與執(zhí)行，主流的 JavaScript 引擎有：V8、SpiderMonkey、JavaScriptCore、Chakra。

一個(gè)頁(yè)面的呈現(xiàn)，粗略的說(shuō)會(huì)經(jīng)過(guò)以下這些步驟：

1. DOM 樹(shù)的構(gòu)建（Parse HTML）
2. 構(gòu)建 CSSOM 樹(shù)（Recaculate Style） 為什么是 Re-caculate Style 呢？這是因?yàn)闉g覽器本身有 User Agent StyleSheet，所以最終的樣式是我們的樣式代碼樣式與用戶代理默認(rèn)樣式覆蓋/重新計(jì)算得到的。
3. 合并 DOM 樹(shù)與 CSSOM 樹(shù)為 Render 樹(shù)
4. 布局（Layout）
5. 繪制（Paint）
6. 復(fù)合圖層化（Composite）圖層化是自己理解后形象的意譯其中布局（Layout）環(huán)節(jié)主要負(fù)責(zé)各元素尺寸、位置的計(jì)算，繪制（Paint）環(huán)節(jié)則是繪制頁(yè)面像素信息，合成（Composite）環(huán)節(jié)是多個(gè)復(fù)合層的合成，最終合成的頁(yè)面被用戶看到。

當(dāng)遇到 JavaScript 腳本或者外部 JavaScript 代碼時(shí)，瀏覽器便停止 DOM 的構(gòu)建（阻塞 1）

那是否停下 DOM 的構(gòu)建的同時(shí)，立馬就執(zhí)行 JavaScript 代碼或者下載外部腳本執(zhí)行，其實(shí)還是要視情況而定，見(jiàn)2

當(dāng)遇到