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

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

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

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

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

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

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

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

重繪

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

重排

當頁面上的改變影響了文檔內容、結構或者元素定位時，就會發生重排（或稱“重新布局”）。重排通常由以下改變觸發：

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

內容的改變，包括 Form 表單中文字的變化。

計算或改變 CSS 屬性。

增加或刪除一個樣式表。

改變”class”屬性。

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

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

原文鏈接： frontendbabel

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。