網(wǎng)頁(yè)的樣式設(shè)計(jì)是由CSS來(lái)完成的。CSS的渲染流程可以用一張圖來(lái)表示。

+-----------------------+
|         DOM樹          |
+-----------|-----------+
V
+-----------------------+
|         CSSOM樹        |
+-----------|-----------+
V
+-----------------------+
|     Render Tree渲染樹   |
+-----------|-----------+
V
+-----------------------+
|        Layout布局       |
+-----------|-----------+
V
+-----------------------+
|        Paint繪制       |
+-----------|-----------+
V
+-----------------------+
|        Compose合成      |
+-----------------------+

以上是CSS的渲染流程圖，下面分別介紹每個(gè)階段。

1. DOM樹

DOM樹是指瀏覽器將HTML文檔轉(zhuǎn)換成一棵樹形結(jié)構(gòu)，每個(gè)HTML標(biāo)簽都被解析為一個(gè)元素節(jié)點(diǎn)。

2. CSSOM樹

CSSOM樹是指將CSS樣式表轉(zhuǎn)換成的一棵樹形結(jié)構(gòu)，每個(gè)CSS樣式被解析為一個(gè)規(guī)則，并存儲(chǔ)在CSSOM樹的節(jié)點(diǎn)中。

3. Render Tree渲染樹

Render Tree渲染樹是由DOM樹和CSSOM樹結(jié)合生成的一棵樹形結(jié)構(gòu)。渲染樹只包含需要顯示的節(jié)點(diǎn)，例如display:none的節(jié)點(diǎn)不會(huì)被包含在渲染樹中。

4. Layout布局

Layout布局是指瀏覽器根據(jù)渲染樹的節(jié)點(diǎn)計(jì)算它們?cè)谄聊簧蠎?yīng)該顯示的位置，大小，對(duì)齊方式等。

5. Paint繪制

Paint繪制是指使用繪制引擎將最終的布局轉(zhuǎn)換成像素，并為每個(gè)節(jié)點(diǎn)著色。

6. Compose合成

Compose合成是指將多個(gè)圖層合并成一個(gè)最終的渲染結(jié)果，并發(fā)送給GPU進(jìn)行顯示。