瀏覽器中渲染流程的示例分析

這篇文章主要介紹了瀏覽器中渲染流程的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

瀏覽器主要組件結(jié)構(gòu)

（瀏覽器主要組件）

渲染引擎——webkit和Gecko

Firefox使用Geoko——Mozilla自主研發(fā)的渲染引擎。

Safari和Chrome都使用webkit。Webkit是一款開(kāi)源渲染引擎，它本來(lái)是為linux平臺(tái)研發(fā)的，后來(lái)由Apple移植到Mac及Windows上。

本文我主要以webkit渲染引擎來(lái)講解，盡管webkit和Gecko使用的術(shù)語(yǔ)稍有不同，他們的主要流程基本相同。

（webkit渲染引擎流程）

關(guān)鍵渲染路徑

關(guān)鍵渲染路徑是指瀏覽器從最初接收請(qǐng)求來(lái)的HTML、CSS、javascript等資源，然后解析、構(gòu)建樹(shù)、渲染布局、繪制，最后呈現(xiàn)給客戶(hù)能看到的界面這整個(gè)過(guò)程。

所以瀏覽器的渲染過(guò)程主要包括以下幾步：

解析HTML生成DOM樹(shù)。

解析CSS生成CSSOM規(guī)則樹(shù)。

將DOM樹(shù)與CSSOM規(guī)則樹(shù)合并在一起生成渲染樹(shù)。

遍歷渲染樹(shù)開(kāi)始布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置大小信息。

將渲染樹(shù)每個(gè)節(jié)點(diǎn)繪制到屏幕。

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

當(dāng)瀏覽器接收到服務(wù)器響應(yīng)來(lái)的HTML文檔后，會(huì)遍歷文檔節(jié)點(diǎn)，生成DOM樹(shù)。

需要注意的是，DOM樹(shù)的生成過(guò)程中可能會(huì)被CSS和JS的加載執(zhí)行阻塞。渲染阻塞問(wèn)題下文會(huì)講。

構(gòu)建CSSOM規(guī)則樹(shù)

瀏覽器解析CSS文件并生成CSS規(guī)則樹(shù)，每個(gè)CSS文件都被分析成一個(gè)StyleSheet對(duì)象，每個(gè)對(duì)象都包含CSS規(guī)則。CSS規(guī)則對(duì)象包含對(duì)應(yīng)于CSS語(yǔ)法的選擇器和聲明對(duì)象以及其他對(duì)象。

渲染阻塞

當(dāng)瀏覽器遇到一個(gè) script 標(biāo)記時(shí)，DOM 構(gòu)建將暫停，直至腳本完成執(zhí)行，然后繼續(xù)構(gòu)建DOM。每次去執(zhí)行JavaScript腳本都會(huì)嚴(yán)重地阻塞DOM樹(shù)的構(gòu)建，如果JavaScript腳本還操作了CSSOM，而正好這個(gè)CSSOM還沒(méi)有下載和構(gòu)建，瀏覽器甚至?xí)舆t腳本執(zhí)行和構(gòu)建DOM，直至完成其CSSOM的下載和構(gòu)建。

所以，script 標(biāo)簽的位置很重要。實(shí)際使用時(shí)，可以遵循下面兩個(gè)原則：

CSS 優(yōu)先：引入順序上，CSS 資源先于 JavaScript 資源。
JS置后：我們通常把JS代碼放到頁(yè)面底部，且JavaScript 應(yīng)盡量少影響 DOM 的構(gòu)建。

當(dāng)解析html的時(shí)候，會(huì)把新來(lái)的元素插入dom樹(shù)里面，同時(shí)去查找css，然后把對(duì)應(yīng)的樣式規(guī)則應(yīng)用到元素上，查找樣式表是按照從右到左的順序去匹配的。

例如： div p {font-size: 16px}，會(huì)先尋找所有p標(biāo)簽并判斷它的父標(biāo)簽是否為div之后才會(huì)決定要不要采用這個(gè)樣式進(jìn)行渲染）。
所以，我們平時(shí)寫(xiě)CSS時(shí)，盡量用id和class，千萬(wàn)不要過(guò)渡層疊。

構(gòu)建渲染樹(shù)

通過(guò)DOM樹(shù)和CSS規(guī)則樹(shù)我們便可以構(gòu)建渲染樹(shù)。瀏覽器會(huì)先從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)。對(duì)每個(gè)可見(jiàn)節(jié)點(diǎn)，找到其適配的CSS樣式規(guī)則并應(yīng)用。

渲染樹(shù)構(gòu)建完成后，每個(gè)節(jié)點(diǎn)都是可見(jiàn)節(jié)點(diǎn)并且都含有其內(nèi)容和對(duì)應(yīng)規(guī)則的樣式。這也是渲染樹(shù)與DOM樹(shù)的最大區(qū)別所在。渲染樹(shù)是用于顯示，那些不可見(jiàn)的元素當(dāng)然就不會(huì)在這棵樹(shù)中出現(xiàn)了，譬如。除此之外，display等于none的也不會(huì)被顯示在這棵樹(shù)里頭，但是visibility等于hidden的元素是會(huì)顯示在這棵樹(shù)里頭的。

渲染樹(shù)布局

布局階段會(huì)從渲染樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷，然后確定每個(gè)節(jié)點(diǎn)對(duì)象在頁(yè)面上的確切大小與位置，布局階段的輸出是一個(gè)盒子模型，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。

渲染樹(shù)繪制

在繪制階段，遍歷渲染樹(shù)，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容。渲染樹(shù)的繪制工作是由瀏覽器的UI后端組件完成的。

reflow與repaint：

根據(jù)渲染樹(shù)布局，計(jì)算CSS樣式，即每個(gè)節(jié)點(diǎn)在頁(yè)面中的大小和位置等幾何信息。HTML默認(rèn)是流式布局的，CSS和js會(huì)打破這種布局，改變DOM的外觀樣式以及大小和位置。這時(shí)就要提到兩個(gè)重要概念：replaint和reflow。

replaint：屏幕的一部分重畫(huà)，不影響整體布局，比如某個(gè)CSS的背景色變了，但元素的幾何尺寸和位置不變。
reflow： 意味著元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算渲染樹(shù)。是渲染樹(shù)的一部分或全部發(fā)生了變化。這就是Reflow，或是Layout。

所以我們應(yīng)該盡量減少reflow和replaint，我想這也是為什么現(xiàn)在很少有用table布局的原因之一。

display:none 會(huì)觸發(fā) reflow，visibility: hidden屬性并不算是不可見(jiàn)屬性，它的語(yǔ)義是隱藏元素，但元素仍然占據(jù)著布局空間，它會(huì)被渲染成一個(gè)空框，所以visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆](méi)有發(fā)生位置變化。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“瀏覽器中渲染流程的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!