圖解瀏覽器的多進(jìn)程渲染機(jī)制

者簡(jiǎn)介：高揚(yáng)，來(lái)自抖音社區(qū)安全前端團(tuán)隊(duì)，團(tuán)隊(duì)負(fù)責(zé)的工作重點(diǎn)在于降低社區(qū)中不良內(nèi)容與行為對(duì)用戶造成的傷害。

引言

觀察瀏覽器的任務(wù)管理器可以發(fā)現(xiàn)，打開(kāi)瀏覽器的一個(gè)頁(yè)面需要多個(gè)進(jìn)程，包括瀏覽器進(jìn)程、GPU進(jìn)程、網(wǎng)絡(luò)進(jìn)程、渲染進(jìn)程等，有插件的話還會(huì)包括各種插件進(jìn)程（Chrome選項(xiàng) -> 更多工具 -> 任務(wù)管理器）。

本文將聚焦于瀏覽器的各個(gè)進(jìn)程間是如何配合，將頁(yè)面呈現(xiàn)給用戶的。

你將了解到

瀏覽器在歷史發(fā)展過(guò)程中，其進(jìn)程架構(gòu)做了哪些調(diào)整，為什么這樣調(diào)整，以及解決了哪些問(wèn)題？
從用戶在地址欄輸入U(xiǎn)RL，到頁(yè)面渲染完成這之間發(fā)生了什么？回流和重繪是如何對(duì)瀏覽器性能造成影響的？

1.瀏覽器進(jìn)程架構(gòu)的演化

進(jìn)程和線程

進(jìn)程

一個(gè)進(jìn)程就是一個(gè)程序的運(yùn)行實(shí)例，它是由用來(lái)存放代碼、運(yùn)行中的數(shù)據(jù)以及一個(gè)執(zhí)行任務(wù)的主線程的內(nèi)存組成的運(yùn)行環(huán)境；
當(dāng)一個(gè)進(jìn)程關(guān)閉后，操作系統(tǒng)會(huì)回收為該進(jìn)程分配的內(nèi)存（即使該進(jìn)程中存在因操作不當(dāng)導(dǎo)致內(nèi)存泄漏的線程）；
進(jìn)程之間的內(nèi)容是相互隔離的，這是為了保護(hù)操作系統(tǒng)中的進(jìn)程互不干擾；
當(dāng)進(jìn)程之間需要進(jìn)行通信時(shí)，可使用進(jìn)程間通信（IPC）機(jī)制。

線程

線程是由進(jìn)程來(lái)啟動(dòng)和管理的，一個(gè)應(yīng)用程序在執(zhí)行的時(shí)候會(huì)存在多個(gè)子任務(wù)的情況，使用多線程并行處理可以大大提升性能；
由于線程依附于進(jìn)程，進(jìn)程中的任一線程執(zhí)行出錯(cuò)也會(huì)導(dǎo)致整個(gè)進(jìn)程的崩潰（因?yàn)閮?nèi)存是共享的）；
同一進(jìn)程中的多個(gè)線程可共享進(jìn)程所擁有的資源。這種資源包括內(nèi)存空間，也包括操作系統(tǒng)的權(quán)限。

單進(jìn)程和多進(jìn)程瀏覽器

單進(jìn)程瀏覽器

單進(jìn)程瀏覽器是指所有功能模塊（網(wǎng)絡(luò)、插件、JS運(yùn)行環(huán)境、渲染引擎、頁(yè)面等）都運(yùn)行在同一進(jìn)程中的瀏覽器（早期的IE、Firefox）。

單進(jìn)程瀏覽器存在的問(wèn)題：

【不穩(wěn)定】

瀏覽器中的插件運(yùn)行在瀏覽器的進(jìn)程之中，插件的崩潰會(huì)引起整個(gè)瀏覽器的崩潰；
渲染引擎通常也是不穩(wěn)定的，例如復(fù)雜的JS腳本也會(huì)引起渲染引擎的崩潰，最終導(dǎo)致瀏覽器崩潰。

【不流暢】

CPU在某個(gè)時(shí)間點(diǎn)只能執(zhí)行某個(gè)進(jìn)程中的某一條線程。由于單進(jìn)程瀏覽器中所有的頁(yè)面的各種模塊都在同一線程中運(yùn)行，即同一時(shí)刻只能有一個(gè)模塊可以執(zhí)行。
當(dāng)一個(gè)頁(yè)面的某個(gè)模塊阻塞了該線程，就會(huì)導(dǎo)致整個(gè)瀏覽器失去響應(yīng)；此外，頁(yè)面的內(nèi)存泄漏也會(huì)導(dǎo)致單進(jìn)程瀏覽器使用時(shí)間越長(zhǎng)，反應(yīng)越慢。

【不安全】

線程共享進(jìn)程資源，因而插件就能獲取到瀏覽器運(yùn)行過(guò)程中的數(shù)據(jù)，以及擁有和瀏覽器同等的系統(tǒng)權(quán)限。
例如，插件可使用C/C++編寫(xiě)，通過(guò)插件可以獲取到操作系統(tǒng)任意資源；腳本也可以通過(guò)瀏覽器的漏洞來(lái)獲取系統(tǒng)權(quán)限，引發(fā)安全問(wèn)題。

多進(jìn)程瀏覽器

Chrome一問(wèn)世便使用了多進(jìn)程的架構(gòu)，其頁(yè)面運(yùn)行在了單獨(dú)的渲染進(jìn)程中，插件運(yùn)行在單獨(dú)的插件進(jìn)行中，進(jìn)程間使用IPC進(jìn)行通信。

瀏覽器的主要進(jìn)程有哪些：

瀏覽器進(jìn)程。相當(dāng)于瀏覽器的大腦，主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理，同時(shí)提供存儲(chǔ)等功能。
渲染進(jìn)程。核心任務(wù)是將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁(yè)，排版引擎 Blink 和 JavaScript 引擎 V8 都是運(yùn)行在該進(jìn)程中。

默認(rèn)情況下，Chrome 會(huì)為每個(gè) Tab 標(biāo)簽創(chuàng)建一個(gè)渲染進(jìn)程。因?yàn)殇秩具M(jìn)程所有的內(nèi)容都是通過(guò)網(wǎng)絡(luò)獲取的，會(huì)存在一些惡意代碼利用瀏覽器漏洞對(duì)系統(tǒng)進(jìn)行攻擊，所以運(yùn)行在渲染進(jìn)程里面的代碼是不被信任的。這也是為什么 Chrome 會(huì)讓渲染進(jìn)程運(yùn)行在安全沙箱里，就是為了保證系統(tǒng)的安全。

網(wǎng)絡(luò)進(jìn)程。主要負(fù)責(zé)頁(yè)面的網(wǎng)絡(luò)資源加載，之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程里面的，目前已獨(dú)立出來(lái)，成為一個(gè)單獨(dú)的進(jìn)程。
插件進(jìn)程。主要是負(fù)責(zé)插件的運(yùn)行，因插件易崩潰，所以需要通過(guò)插件進(jìn)程來(lái)隔離，以保證插件進(jìn)程崩潰不會(huì)對(duì)瀏覽器和頁(yè)面造成影響。
GPU 進(jìn)程。當(dāng)頁(yè)面使用了硬件加速時(shí)，會(huì)使用它來(lái)渲染頁(yè)面。

其實(shí)，Chrome 剛開(kāi)始發(fā)布的時(shí)候是沒(méi)有單獨(dú) GPU 進(jìn)程的，都是放到瀏覽器主進(jìn)程中的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS 的效果，只是隨后網(wǎng)頁(yè)、Chrome 的 UI 界面都選擇采用 GPU 來(lái)繪制，這使得 GPU 成為瀏覽器普遍的需求。最后，Chrome 在其多進(jìn)程架構(gòu)上也引入了 GPU 進(jìn)程。

多進(jìn)程瀏覽器是如何解決單進(jìn)程瀏覽的問(wèn)題的：

【不穩(wěn)定】正是由于進(jìn)程之間相互隔離，當(dāng)一個(gè)頁(yè)面或者插件崩潰時(shí)只會(huì)影響當(dāng)前的進(jìn)程，不會(huì)影響到瀏覽器和其他頁(yè)面。
【不流暢】由于JS腳本運(yùn)行在渲染進(jìn)程中，即使JS阻塞了渲染進(jìn)程，也只會(huì)影響當(dāng)前頁(yè)面的渲染，而其他頁(yè)面的腳本則會(huì)運(yùn)行在他們自己的渲染進(jìn)程中，不受影響；此外，內(nèi)存泄漏導(dǎo)致的不流暢問(wèn)題也會(huì)隨著一個(gè)頁(yè)面的關(guān)閉導(dǎo)致一個(gè)進(jìn)程的結(jié)束而解決。
【不安全】多進(jìn)程架構(gòu)的安全沙箱，相當(dāng)于是操作系統(tǒng)給進(jìn)程上了一把鎖，沙箱中的程序可運(yùn)行不可寫(xiě)入、不可讀取敏感數(shù)據(jù)。

多進(jìn)程瀏覽器存在的問(wèn)題：

更高的資源占用。以Chrome瀏覽器為例，其將為每個(gè)頁(yè)面分配單獨(dú)的渲染進(jìn)程，為每個(gè)插件分配單獨(dú)的插件進(jìn)程，因此會(huì)消耗更多內(nèi)存資源。
更復(fù)雜的體系架構(gòu)。瀏覽器各個(gè)模塊之間耦合度高、擴(kuò)展性差目前的架構(gòu)較難適應(yīng)新需。

2. 導(dǎo)航流程

從用戶發(fā)出URL請(qǐng)求到頁(yè)面開(kāi)始解析的過(guò)程，叫做導(dǎo)航，是網(wǎng)絡(luò)加載流程和渲染流程之間的橋梁。

首先，瀏覽器進(jìn)程接收到用戶輸入的 URL 請(qǐng)求，瀏覽器進(jìn)程便將該 URL 通過(guò) IPC 轉(zhuǎn)發(fā)給網(wǎng)絡(luò)進(jìn)程。
然后，在網(wǎng)絡(luò)進(jìn)程中發(fā)起真正的 URL 請(qǐng)求。
接著網(wǎng)絡(luò)進(jìn)程接收到了響應(yīng)頭數(shù)據(jù)，便解析響應(yīng)頭數(shù)據(jù)，并將數(shù)據(jù)轉(zhuǎn)發(fā)給瀏覽器進(jìn)程。
瀏覽器進(jìn)程接收到網(wǎng)絡(luò)進(jìn)程的響應(yīng)頭數(shù)據(jù)之后，發(fā)送“提交文檔 (CommitNavigation)”消息到渲染進(jìn)程。
渲染進(jìn)程接收到“提交文檔”的消息之后，便開(kāi)始準(zhǔn)備接收 HTML 數(shù)據(jù)，接收數(shù)據(jù)的方式是直接和網(wǎng)絡(luò)進(jìn)程建立數(shù)據(jù)管道。
待網(wǎng)絡(luò)進(jìn)程中文檔數(shù)據(jù)傳輸完成，渲染進(jìn)程會(huì)向?yàn)g覽器進(jìn)程“確認(rèn)提交”，這是告訴瀏覽器進(jìn)程：“已經(jīng)準(zhǔn)備好接收和解析頁(yè)面數(shù)據(jù)了”。
瀏覽器進(jìn)程接收到渲染進(jìn)程“確認(rèn)提交”的消息之后，導(dǎo)航流程就結(jié)束了。此時(shí)，渲染進(jìn)程就會(huì)開(kāi)始解析頁(yè)面和加載子資源了，瀏覽器進(jìn)程將開(kāi)始移除之前舊的文檔，然后更新瀏覽器進(jìn)程中的頁(yè)面狀態(tài)。

3. 渲染流程

渲染流水線

渲染流水線可分為如下幾個(gè)子階段：構(gòu)建 DOM 樹(shù)、樣式計(jì)算、布局、分層、繪制、分塊、光柵化和合成。

構(gòu)建DOM樹(shù)（DOM）

瀏覽器無(wú)法直接理解和使用 HTML，所以要將其轉(zhuǎn)化為瀏覽器能夠理解的解構(gòu)——經(jīng)過(guò) HTML 解析器解析，輸出樹(shù)狀結(jié)構(gòu)的 DOM

樣式計(jì)算（Style）

目的是計(jì)算DOM節(jié)點(diǎn)中的每個(gè)元素具體樣式，可分為三步

渲染引擎把CSS文本轉(zhuǎn)為瀏覽器可理解的結(jié)構(gòu)——styleSheets 樣式表
標(biāo)準(zhǔn)化樣式表中的屬性值。這是由于渲染引擎無(wú)法理解CSS文本中的各種屬性值，這些值會(huì)被轉(zhuǎn)為標(biāo)準(zhǔn)化的計(jì)算值（例如{color: blue} → {color: rgb(0, 0, 225)}、{font-weight: bold} → {font-weight: 700}）
計(jì)算出DOM樹(shù)中每個(gè)節(jié)點(diǎn)的具體樣式，計(jì)算過(guò)程遵守CSS的繼承和層疊規(guī)則，被保存在 ComputedStyle 結(jié)構(gòu)內(nèi)

布局階段（Layout）

計(jì)算DOM樹(shù)中可見(jiàn)元素的幾何位置信息，包括創(chuàng)建布局樹(shù)和布局計(jì)算兩個(gè)階段

創(chuàng)建布局樹(shù)

遍歷DOM樹(shù)中的所有需要渲染節(jié)點(diǎn)，并添加到布局樹(shù)中
不可見(jiàn)的節(jié)點(diǎn)如 head 標(biāo)簽下的全部?jī)?nèi)容，display: none的標(biāo)簽等會(huì)被忽略

布局計(jì)算

計(jì)算DOM節(jié)點(diǎn)的位置坐標(biāo)，布局運(yùn)算的結(jié)果會(huì)被寫(xiě)回布局樹(shù)中

分層（Layer）

針對(duì)頁(yè)面中的復(fù)雜效果，例如復(fù)雜的3D變換、頁(yè)面滾動(dòng)、z 軸排序等，渲染引擎將為特定節(jié)點(diǎn)生成專(zhuān)用的圖層，并生成一顆圖層樹(shù)（Layer Tree）

擁有層疊上下文屬性的元素會(huì)被提升為單獨(dú)的一層；需要剪裁的地方也會(huì)被創(chuàng)建為單獨(dú)的圖層

注意，并非布局樹(shù)的每個(gè)節(jié)點(diǎn)都包含一個(gè)圖層，一個(gè)節(jié)點(diǎn)可以直接或間接地屬于一個(gè)層，例如一個(gè)節(jié)點(diǎn)可以從屬于父節(jié)點(diǎn)的圖層

圖層繪制（Paint）

渲染引擎會(huì)對(duì)圖層樹(shù)中每個(gè)圖層進(jìn)行繪制，將一個(gè)圖層的繪制拆分成很多小的繪制指令，然后把這些指令按順序組成一個(gè)待繪制列表

柵格化（生成位圖）

繪制列表準(zhǔn)備好后，主線程將其提交給合成線程，實(shí)際的繪制操作由渲染引擎中的合成線程來(lái)完成

合成線程會(huì)根據(jù)視口位置和大小，將圖層（layer）劃分為塊（圖塊 tile）
合成線程會(huì)按照視口附近的圖塊來(lái)優(yōu)先生成位圖，實(shí)際生成位圖的操作由柵格化（將圖塊轉(zhuǎn)換為位圖）來(lái)執(zhí)行，圖塊是柵格化的最小單位
渲染進(jìn)程會(huì)維護(hù)一個(gè)柵格化的線程池，柵格化過(guò)程通常都會(huì)使用GPU來(lái)加速生成，使用GPU生成位圖的過(guò)程叫做快速柵格化，生成的位圖被保存在GPU內(nèi)存中

合成與顯示

所有圖塊都被柵格化后，合成線程將生成繪制圖塊命令 DrawQuad 提交給瀏覽器進(jìn)程
瀏覽器進(jìn)程中 viz 組件接收 DrawQuad 命令，根據(jù)此命令，將其頁(yè)面內(nèi)容繪制在內(nèi)存中，最后再顯示到屏幕上

流水線總結(jié)

渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂的 DOM 樹(shù)結(jié)構(gòu)。
渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的 styleSheets，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
創(chuàng)建布局樹(shù)，并計(jì)算元素的布局信息。
對(duì)布局樹(shù)進(jìn)行分層，并生成分層樹(shù)。
為每個(gè)圖層生成繪制列表，并將其提交到合成線程。
合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖。
合成線程發(fā)送繪制圖塊命令 DrawQuad 給瀏覽器進(jìn)程。
瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁(yè)面，并顯示到顯示器上。

回流和重繪

基于上述瀏覽器的渲染原理，我們可以理解回流和重繪是如何對(duì)瀏覽器性能造成影響的。由于瀏覽器渲染頁(yè)面默認(rèn)使用流式布局模型，當(dāng)某個(gè)DOM或CSS幾何屬性發(fā)生改變后，文檔流就會(huì)受到波動(dòng)，就需要對(duì)DOM重新進(jìn)行計(jì)算，重新布局頁(yè)面，引發(fā)回流。

更新元素幾何屬性 —— 回流

幾何屬性的修改會(huì)觸發(fā)瀏覽器重新布局（Layout & Layer），渲染樹(shù)需要重新生成，解析后來(lái)的一系列子階段
因此回流需要更新完整的渲染流水線，開(kāi)銷(xiāo)是最大的

更新元素繪制屬性 —— 重繪

繪制屬性的修改并沒(méi)有導(dǎo)致幾何位置的變化，所以不會(huì)導(dǎo)致布局階段的執(zhí)行，會(huì)直接進(jìn)入繪制階段，然后執(zhí)行后來(lái)的子階段
重繪操作相比回流省去了布局和分層階段，效率高于回流

GPU加速 —— 直接合成

如果更改的屬性不需要布局和繪制，渲染引擎會(huì)跳過(guò)布局和繪制，直接進(jìn)入非主線程——合成線程執(zhí)行后續(xù)合成操作（比如利用 CSS3 的transform、opacity、filter這些屬性就可以實(shí)現(xiàn)合成效果）
例如，使用CSS transform實(shí)現(xiàn)動(dòng)畫(huà)效果的渲染流水線如下：一是避開(kāi)了重繪、回流，因此避開(kāi)了布局和繪制階段；二是直接在非主線程執(zhí)行合成動(dòng)畫(huà)操作，未占用主線程資源。相比于重繪和回流，合成大大提升了繪制效率

Reference

[1] 瀏覽器工作原理與實(shí)踐：https://time.geekbang.org/column/intro/100033601

[2] 瀏覽器進(jìn)程架構(gòu)的演化：https://zhuanlan.zhihu.com/p/96957235

覽器渲染頁(yè)面有以下幾個(gè)步驟：

當(dāng)瀏覽器的網(wǎng)絡(luò)進(jìn)程接收到 HTML文檔后，會(huì)開(kāi)啟一個(gè)渲染任務(wù)，并將其傳遞給渲染主線程的消息隊(duì)列。
在事件循環(huán)機(jī)制的作用下，渲染主線程會(huì)取出消息隊(duì)列中的渲染任務(wù)，開(kāi)啟渲染流程。
整個(gè)的渲染流程分為多個(gè)階段，分別是：HTML 解析、樣式計(jì)算、布局、分層、繪制、分塊、光柵化、畫(huà)；
每個(gè)階段都有明確的輸入和輸出、上一個(gè)階段的輸出會(huì)成為下一個(gè)階段的輸入；這樣一來(lái)，整個(gè)渲染流程就形成了一套組織嚴(yán)密的生產(chǎn)流水線。

載網(wǎng)絡(luò)，侵權(quán)必刪

我們可能都知道瀏覽器含有一個(gè)渲染引擎，用來(lái)渲染窗口所展示的內(nèi)容。默認(rèn)情況下，渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件（一種瀏覽器擴(kuò)展）顯示其他類(lèi)型數(shù)據(jù)，例如使用PDF閱讀器插件，用于顯示PDF格式。但是其具體的渲染原理和流程估計(jì)也有很多人都不知道或者不清楚吧。這些天研究了一下瀏覽器的渲染原理，有了些心得，在這里跟大家分享一下，這里只討論渲染引擎最主要的用途——顯示應(yīng)用了CSS之后的html及圖片。

渲染引擎簡(jiǎn)介

　　本文所討論的瀏覽器——Firefox、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit。

渲染主流程

　　渲染引擎首先通過(guò)網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程：

　　解析html以構(gòu)建dom樹(shù) -> 構(gòu)建render樹(shù) -> 布局render樹(shù) -> 繪制render樹(shù)

　這里先解釋一下幾個(gè)概念，方便大家理解：

　　DOM Tree：瀏覽器將HTML解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)。

　　CSS Rule Tree：瀏覽器將CSS解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)。

　　Render Tree: DOM和CSSOM合并后生成Render Tree。

　　layout: 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系，從而去計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

　　painting: 按照算出來(lái)的規(guī)則，通過(guò)顯卡，把內(nèi)容畫(huà)到屏幕上。

　　reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱(chēng)這個(gè)回退的過(guò)程叫 reflow。reflow 會(huì)從 <html> 這個(gè) root frame 開(kāi)始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置。reflow 幾乎是無(wú)法避免的。現(xiàn)在界面上流行的一些效果，比如樹(shù)狀目錄的折疊、展開(kāi)（實(shí)質(zhì)上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。鼠標(biāo)滑過(guò)、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周?chē)踔琳麄€(gè)頁(yè)面的重新渲染。通常我們都無(wú)法預(yù)估瀏覽器到底會(huì) reflow 哪一部分的代碼，它們都彼此相互影響著。

　　repaint（重繪）：改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周?chē)騼?nèi)部布局的屬性時(shí)，屏幕的一部分要重畫(huà)，但是元素的幾何尺寸沒(méi)有變。

注意：(1)display:none 的節(jié)點(diǎn)不會(huì)被加入Render Tree，而visibility: hidden 則會(huì)，所以，如果某個(gè)節(jié)點(diǎn)最開(kāi)始是不顯示的，設(shè)為display:none是更優(yōu)的。

　　 (2)display:none 會(huì)觸發(fā) reflow，而 visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化。

　　　(3)有些情況下，比如修改了元素的樣式，瀏覽器并不會(huì)立刻reflow 或 repaint 一次，而是會(huì)把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁(yè)面默認(rèn)的字體等。對(duì)于這些操作，瀏覽器會(huì)馬上進(jìn)行 reflow。

　　來(lái)看看webkit的主要流程：

　　再來(lái)看看Geoko的主要流程：

　　Gecko 里把格式化好的可視元素稱(chēng)做“幀樹(shù)”（Frame tree）。每個(gè)元素就是一個(gè)幀（frame）。 webkit 則使用”渲染樹(shù)”這個(gè)術(shù)語(yǔ)，渲染樹(shù)由”渲染對(duì)象”組成。webkit 里使用”layout”表示元素的布局，Gecko則稱(chēng)為”reflow”。Webkit使用”Attachment”來(lái)連接DOM節(jié)點(diǎn)與可視化信息以構(gòu)建渲染樹(shù)。一個(gè)非語(yǔ)義上的小差別是Gecko在HTML與DOM樹(shù)之間有一個(gè)附加的層，稱(chēng)作”content sink”，是創(chuàng)建DOM對(duì)象的工廠。

　　盡管Webkit與Gecko使用略微不同的術(shù)語(yǔ)，這個(gè)過(guò)程還是基本相同的，如下：

　　1. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹(shù)，DOM 樹(shù)的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

　　2. 將CSS解析成 CSS Rule Tree 。

　　3. 根據(jù)DOM樹(shù)和CSSOM來(lái)構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹(shù)并不等同于 DOM 樹(shù)，因?yàn)橐恍┫馠eader或display:none的東西就沒(méi)必要放在渲染樹(shù)中了。

　　4. 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱(chēng)之為layout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

　　5. 再下一步就是繪制，即遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

　　注意：上述這個(gè)過(guò)程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容。

在線咨詢

上一篇：HTML5教程離線緩存管理庫(kù)詳解
下一篇：HTML5廢除的元素

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商