前端基礎 瀏覽器渲染機制

1、doctype概念及作用

doctype是用來宣告文件型別和dtd規範的，乙個主要的用途便是檔案的合法性驗證。如果檔案**不合法，那麼瀏覽器解析時便會出一些差錯。

dtd (document type definition,文件型別定義)是一系列的語法規則，用來定 義xml或(x)html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析，以及切換瀏覽器模式。

常見的doctype宣告

html5

該 dtd 包含所有 html 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（framesets）。

該 dtd 包含所有 html 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（framesets）。

如果沒有宣告，那麼不同的瀏覽器將會以自己不同的怪異的模式去解析渲染頁面，這樣頁面在不同的瀏覽器上呈現出來的效果也就不一樣，人們把這稱之為「怪異模式」。

瀏覽器渲染的過程如下：

大概可以劃分成以下幾個步驟：

（1）根據html檔案解析出dom tree

（2）根據css解析出 cssom tree(css規則樹)

（3）將 dom tree 和 cssom tree合併，構建render tree(渲染樹)

（4）reflow(重排)：根據render tree進行節點資訊計算（layout）

（5）repaint(重繪)：根據計算好的資訊繪製整個頁面（painting）

理論上，每一次的dom更改或者css幾何屬性更改，都會引起一次瀏覽器的重排/重繪過程，而如果是css的非幾何屬性更改，則只會引起重繪過程。所以說重排一定會引起重繪，而重繪不一定會引起重排。

瀏覽器渲染頁面預設採用的是流式布局模型（flow based layout）。 html 採用基於流的布局模型，這意味著大多數情況下只要一次遍歷就能計算出幾何資訊。處於流中靠後位置元素通常不會影響靠前位置元素的幾何特徵，因此布局可以按從左至右、從上至下的順序遍歷文件。但是也有例外情況，比如 html **的計算就需要不止一次的遍歷。

布局是乙個遞迴的過程。它從根呈現器（對應於 html 文件的 元素）開始，然後遞迴遍歷部分或所有的框架層次結構，為每乙個需要計算的呈現器計算幾何資訊。

座標系是相對於根框架而建立的，使用的是上座標和左座標。

render tree是由 dom 和 cssom 組合構建而成的。也是頁面視覺化元素按照其顯示順序而組成的樹。它的作用是讓瀏覽器按照正確的順序繪製內容。

(2) 重排reflow

定義:dom結構中的各個元素都有自己的盒子(模型)， 這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之reflow.

觸發reflow

(3) 重繪repaint

定義:當各種盒子的位置、大小以及其他屬性,例如顏色、字型大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之為repaint.

觸發repaint

瀏覽器渲染機制

google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...

瀏覽器渲染機制

1.什麼是doctype及其作用 dtd document type definition，文件型別定義 是一系列的語法規則，用來定義xml或 x html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析及切換瀏覽器模式 doctype是用來宣告文件型別和dtd規範的，乙個主要的用途...

前端系統複習之瀏覽器渲染機制

二面的內容 本文接下來講渲染機制。渲染機制包括的內容 面試經常會問 在瀏覽器中輸入url，發生了哪些事情。其中有一部就是瀏覽器的渲染過程。面試官問完了渲染機制，一般會緊接著問重排reflow，你可千萬別說你沒聽過。這裡的layout指的是瀏覽器的layout。dtd document type de...