今天我們來(lái)了解一下關(guān)于瀏覽器渲染的知識(shí)，這也是在面試中常常被問(wèn)起的知識(shí)點(diǎn)之一。

瀏覽器是怎樣渲染一個(gè)頁(yè)面的？

我們從瀏覽器渲染頁(yè)面的大概過(guò)程開(kāi)始說(shuō)起：

1.由從服務(wù)器接收到的 HTML 形成 DOM（文檔對(duì)象模型）。

2. 樣式被加載和解析，形成 CSSOM（CSS 對(duì)象模型）。

3.緊接著 DOM 和 CSSOM 創(chuàng)建了一個(gè)渲染樹(shù)，這個(gè)渲染樹(shù)是一些被渲染對(duì)象的集合（ Webkit 分別叫它們”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可見(jiàn)的元素（比如 head 標(biāo)簽和一些有 display:none 屬性的元素），渲染樹(shù)映射了 DOM 的結(jié)構(gòu)。在渲染樹(shù)中，每一個(gè)文本字符串都被當(dāng)做一個(gè)獨(dú)立的 renderer。每個(gè)渲染對(duì)象都包含了與之對(duì)應(yīng)的計(jì)算過(guò)樣式的DOM 對(duì)象（或者一個(gè)文本塊）。換句話說(shuō)，渲染樹(shù)描述了 DOM 的直觀的表現(xiàn)形式。

4. 對(duì)每個(gè)渲染元素來(lái)說(shuō)，它的坐標(biāo)是經(jīng)過(guò)計(jì)算的，這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來(lái)布局所有元素（tables需要多次處理）。

5.最后，將布局顯示在瀏覽器窗口中，這個(gè)過(guò)程叫做“繪制(painting)”。

重繪

當(dāng)在頁(yè)面上修改了一些不需要改變定位的樣式的時(shí)候(比如background-color,border-color,visibility)，瀏覽器只會(huì)將新的樣式重新繪制給元素（這就叫一次“重繪”或者“重新定義樣式”）。

重排

當(dāng)頁(yè)面上的改變影響了文檔內(nèi)容、結(jié)構(gòu)或者元素定位時(shí)，就會(huì)發(fā)生重排（或稱“重新布局”）。重排通常由以下改變觸發(fā)：

DOM 操作（如元素增、刪、改或者改變?cè)仨樞?#xff09;。

內(nèi)容的改變，包括 Form 表單中文字的變化。

計(jì)算或改變 CSS 屬性。

增加或刪除一個(gè)樣式表。

改變”class”屬性。

瀏覽器窗口的操作（改變大小、滾動(dòng)窗口）。 激活偽類（如:hover狀態(tài)）。

前端入門(mén)難，晉升不易，帶上你身邊的朋友一起來(lái)了解前端的世界吧！

原文鏈接： frontendbabel

總結(jié)

以上是生活随笔為你收集整理的每个前端开发者都要理解页面的渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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