DOM渲染原理

時間 2020-02-23

標籤 dom 渲染原理欄目 HTML 简体版

原文原文鏈接

瀏覽器渲染過程

解析HTML，構建DOM樹（這裏遇到外鏈，此時會發起請求）
解析CSS，生成CSS規則樹
合併DOM樹和CSS規則，生成render樹
佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算
繪製render樹（paint），繪製頁面像素信息
瀏覽器會將各層的信息發送給GPU，GPU將各層合成（composite），顯示在屏幕上

1. 構建DOM樹

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>
複製代碼

不管是DOM仍是CSSOM，都是要通過Bytes → characters → tokens → nodes → object model這個過程。css

DOM樹構建過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點。html

2. 構建CSSOM樹

上述也提到了CSSOM的構建過程，也是樹的結構，在最終計算各個節點的樣式時，瀏覽器都會先從該節點的廣泛屬性（好比body裏設置的全局樣式）開始，再去應用該節點的具體屬性。還有要注意的是，每一個瀏覽器都有本身默認的樣式表，所以不少時候這棵CSSOM樹只是對這張默認樣式表的部分替換。node

3. 生成render樹

DOM樹和CSSOM樹合併生成render樹web

簡單描述這個過程：瀏覽器

DOM樹從根節點開始遍歷可見節點，這裏之因此強調了「可見」，是由於若是遇到設置了相似display: none;的不可見節點，在render過程當中是會被跳過的（但visibility: hidden; opacity: 0這種仍舊佔據空間的節點不會被跳過render），保存各個節點的樣式信息及其他節點的從屬關係。bash

4. Layout 佈局

有了各個節點的樣式信息和屬性，但不知道各個節點的確切位置和大小，因此要經過佈局將樣式信息和屬性轉換爲實際可視窗口的相對大小和位置。dom

5. Paint 繪製

萬事俱備，最後只要將肯定好位置大小的各節點，經過GPU渲染到屏幕的實際像素。佈局

Tips

在上述渲染過程當中，前3點可能要屢次執行，好比js腳本去操做dom、更改css樣式時，瀏覽器又要從新構建DOM、CSSOM樹，從新render，從新layout、paint；
Layout在Paint以前，所以每次Layout從新佈局（reflow 迴流）後都要從新出發Paint渲染，這時又要去消耗GPU；
Paint不必定會觸發Layout，好比改個顏色改個背景；（repaint 重繪）
圖片下載完也會從新出發Layout和Paint；

什麼時候觸發reflow和repaint

reflow(迴流): 根據Render Tree佈局(幾何屬性)，意味着元素的內容、結構、位置或尺寸發生了變化，須要從新計算樣式和渲染樹；
repaint(重繪): 意味着元素髮生的改變隻影響了節點的一些樣式（背景色，邊框顏色，文字顏色等），只須要應用新樣式繪製這個元素就能夠了；
reflow迴流的成本開銷要高於repaint重繪，一個節點的迴流每每回致使子節點以及同級節點的迴流；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。