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

瀏覽器是怎樣渲染一個頁面的？

我們從瀏覽器渲染頁面的大概過程開始說起：

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

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

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

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

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

重繪

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

重排

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

DOM 操作（如元素增、刪、改或者改變元素順序）。

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

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

增加或刪除一個樣式表。

改變”class”屬性。

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

前端入門難，晉升不易，帶上你身邊的朋友一起來了解前端的世界吧！

原文鏈接： frontendbabel

總結(jié)

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

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