一、瀏覽器如何渲染網(wǎng)頁

要了解瀏覽器渲染頁面的過程，首先得知道一個(gè)名詞——關(guān)鍵路徑渲染。關(guān)鍵渲染路徑（Critical Rendering Path）是指與當(dāng)前用戶操作有關(guān)的內(nèi)容。例如用戶在瀏覽器中打開一個(gè)頁面，其中頁面所顯示的東西就是當(dāng)前用戶操作相關(guān)的內(nèi)容，也就是瀏覽器從服務(wù)器那收到的HTML,CSS,JavaScript等相關(guān)資源，然后經(jīng)過一系列處理后渲染出來的web頁面。

而瀏覽器渲染的過程主要包括以下五步：

• 瀏覽器將獲取的HTML文檔并解析成DOM樹。

• 處理CSS標(biāo)記，構(gòu)成層疊樣式表模型CSSOM(CSS Object Model)。

• 將DOM和CSSOM合并為渲染樹(rendering tree)將會(huì)被創(chuàng)建，代表一系列將被渲染的對象。

• 渲染樹的每個(gè)元素包含的內(nèi)容都是計(jì)算過的，它被稱之為布局layout。瀏覽器使用一種流式處理的方法，只需要一次pass繪制操作就可以布局所有的元素。

• 將渲染樹的各個(gè)節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制painting.

具體如下圖過程如下圖所示：

Webkit

需要注意的是，以上五個(gè)步驟并不一定一次性順序完成，比如DOM或CSSOM被修改時(shí)，亦或是哪個(gè)過程會(huì)重復(fù)執(zhí)行，這樣才能計(jì)算出哪些像素需要在屏幕上進(jìn)行重新渲染。而在實(shí)際情況中，JavaScript和CSS的某些操作往往會(huì)多次修改DOM或者CSSOM。

下面我們就來詳細(xì)的了解一下這幾個(gè)過程及需要注意的事項(xiàng)。

二、瀏覽器渲染網(wǎng)頁的具體流程

2.1 構(gòu)建DOM樹

當(dāng)瀏覽器客戶端從服務(wù)器那接受到HTML文檔后，就會(huì)遍歷文檔節(jié)點(diǎn)然后生成DOM樹，DOM樹結(jié)構(gòu)和HTML標(biāo)簽一一對應(yīng)。需要注意記下幾點(diǎn)：

DOM樹在構(gòu)建的過程中可能會(huì)被CSS和JS的加載而執(zhí)行阻塞。（這在后面會(huì)詳細(xì)介紹。）

display:none 的元素也會(huì)在DOM樹中。

注釋也會(huì)在DOM樹中

script標(biāo)簽會(huì)在DOM樹中

2.2 CSS解析

瀏覽器會(huì)解析CSS文件并生成CSS規(guī)則樹，在過程中，每個(gè)CSS文件都會(huì)被分析成StyleSheet對象，每個(gè)對象都包括CSS規(guī)則，CSS規(guī)則對象包括對應(yīng)的選擇器和聲明對象以及其他對象。
在這個(gè)過程需要注意的是：

• CSS解析可以與DOM解析同進(jìn)行。

• CSS解析與script的執(zhí)行互斥 。

• 在Webkit內(nèi)核中進(jìn)行了script執(zhí)行優(yōu)化，只有在JS訪問CSS時(shí)才會(huì)發(fā)生互斥。

2.3 構(gòu)建渲染樹（Rendr tree construction）

通過DOM樹和CSS規(guī)則樹，瀏覽器就可以通過它兩構(gòu)建渲染樹了。瀏覽器會(huì)先從DOM樹的根節(jié)點(diǎn)開始遍歷每個(gè)可見節(jié)點(diǎn)，讓后對每個(gè)可見節(jié)點(diǎn)找到適配的CSS樣式規(guī)則并應(yīng)用。具體的規(guī)則有以下幾點(diǎn)需要注意：

• Render Tree和DOM Tree不完全對應(yīng)。

• display: none的元素不在Render Tree中

• visibility: hidden的元素在Render Tree中

2.4 渲染樹布局(layout of the render tree)

布局階段會(huì)從渲染樹的更節(jié)點(diǎn)開始遍歷，由于渲染樹的每個(gè)節(jié)點(diǎn)都是一個(gè)Render Object對象，包含寬高，位置，背景色等樣式信息。所以瀏覽器就可以通過這些樣式信息來確定每個(gè)節(jié)點(diǎn)對象在頁面上的確切大小和位置，布局階段的輸出就是我們常說的盒子模型，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。需要注意的是：

• float元素，absoulte元素，fixed元素會(huì)發(fā)生位置偏移。

• 我們常說的脫離文檔流，其實(shí)就是脫離Render Tree。

2.5 渲染樹繪制（Painting the render tree）

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

三、瀏覽器渲染網(wǎng)頁的那些事兒

3.1 阻塞渲染

前面我們有提到這方面的問題，說到資源的阻塞我們清楚的是，現(xiàn)代瀏覽器總是并行加載自語言。例如當(dāng)HTML解析器被腳本阻塞時(shí)，解析器雖然會(huì)停止構(gòu)建DOM，但仍然會(huì)辨識(shí)該腳本后面的資源，并進(jìn)行預(yù)加載。且由于以下兩點(diǎn)。瀏覽器會(huì)延遲 JavaScript 的執(zhí)行和 DOM 構(gòu)建：

• CSS 被默認(rèn)被視為阻塞渲染的資源，因此瀏覽器將在 CSSOM 構(gòu)建完畢前不會(huì)渲染任何已處理的內(nèi)容。

• JavaScript 不僅可以讀取和修改 DOM 屬性，還可以讀取和修改 CSSOM 屬性，因此CSS解析與script的執(zhí)行互斥。

正是由于以上這些原因，script標(biāo)簽的位置很重要我們在實(shí)際開發(fā)中應(yīng)該盡量堅(jiān)持以下兩個(gè)原則：

• 在引入順序上，CSS 資源先于 JavaScript 資源。

• JavaScript 應(yīng)盡量少的去影響 DOM 的構(gòu)建。

3.2 回流和重繪（reflow和repaint）

我們都知道HTML默認(rèn)是流式布局的，但CSS和JS會(huì)打破這種布局，改變DOM的外觀樣式以及大小和位置。因此我們就需要知道兩個(gè)概念:

• reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)部分發(fā)生了變化從而影響了布局，這個(gè)時(shí)候就需要倒回去重新渲染，大家稱這個(gè)回退的過程叫 reflow。 常見的reflow是一些會(huì)影響頁面布局的操作，諸如Tab，隱藏等。reflow 會(huì)從 html 這個(gè) root frame 開始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置，以確認(rèn)是渲染樹的一部分發(fā)生變化還是整個(gè)渲染樹。reflow幾乎是無法避免的，因?yàn)橹灰脩暨M(jìn)行交互操作，就勢必會(huì)發(fā)生頁面的一部分的重新渲染，且通常我們也無法預(yù)估瀏覽器到底會(huì)reflow哪一部分的代碼，因?yàn)樗麄儠?huì)相互影響。

• repaint（重繪）： repaint則是當(dāng)我們改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫，但是元素的幾何尺寸和位置沒有發(fā)生改變。

需要注意的是，display:none 會(huì)觸發(fā) reflow，而visibility: hidden屬性則并不算是不可見屬性，它的語義是隱藏元素，但元素仍然占據(jù)著布局空間，它會(huì)被渲染成一個(gè)空框，這在我們上面有提到過。所以visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆]有發(fā)生位置變化。

我們不能避免reflow，但還是能通過一些操作來減少回流：

用transform做形變和位移.

通過絕對位移來脫離當(dāng)前層疊上下文，形成新的Render Layer。

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

3.3 幾條關(guān)于優(yōu)化渲染效率的建議

結(jié)合上文和我看到的一些文章，有以下幾點(diǎn)可以優(yōu)化渲染效率

合法地去書寫 HTML 和 CSS ，且不要忘了文檔編碼類型。

樣式文件應(yīng)當(dāng)在 head 標(biāo)簽中，而腳本文件在 body 結(jié)束前，這樣可以防止阻塞的方式。

簡化并優(yōu)化CSS選擇器，盡量將嵌套層減少到最小。

盡量減少在 JavaScript 中進(jìn)行DOM操作。

修改元素樣式時(shí)，更改其class屬性是性能最高的方法。

盡量用 transform 來做形變和位移

轉(zhuǎn)載于:https://www.cnblogs.com/guchengnan/p/10755950.html

總結(jié)

以上是生活随笔為你收集整理的浏览器渲染原理与过程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。