原文鏈接 http://blog.poetries.top/2018/12/22/browser-render

關(guān)注公眾號(hào)獲取更多資訊

一、瀏覽器如何渲染網(wǎng)頁(yè)

概述：瀏覽器渲染一共有五步

1. 處理 HTML 并構(gòu)建 DOM 樹(shù)。
2. 處理 CSS構(gòu)建 CSSOM 樹(shù)。
3. 將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)。
4. 根據(jù)渲染樹(shù)來(lái)布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置。
5. 調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

第四步和第五步是最耗時(shí)的部分，這兩步合起來(lái)，就是我們通常所說(shuō)的渲染

具體如下圖過(guò)程如下圖所示

image.png

image.png

渲染

• 網(wǎng)頁(yè)生成的時(shí)候，至少會(huì)渲染一次
• 在用戶訪問(wèn)的過(guò)程中，還會(huì)不斷重新渲染

重新渲染需要重復(fù)之前的第四步(重新生成布局)+第五步(重新繪制)或者只有第五個(gè)步(重新繪制)

• 在構(gòu)建 CSSOM 樹(shù)時(shí)，會(huì)阻塞渲染，直至 CSSOM樹(shù)構(gòu)建完成。并且構(gòu)建 CSSOM 樹(shù)是一個(gè)十分消耗性能的過(guò)程，所以應(yīng)該盡量保證層級(jí)扁平，減少過(guò)度層疊，越是具體的 CSS 選擇器，執(zhí)行速度越慢
• 當(dāng) HTML 解析到 script 標(biāo)簽時(shí)，會(huì)暫停構(gòu)建 DOM，完成后才會(huì)從暫停的地方重新開(kāi)始。也就是說(shuō)，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件。并且CSS也會(huì)影響 JS 的執(zhí)行，只有當(dāng)解析完樣式表才會(huì)執(zhí)行 JS，所以也可以認(rèn)為這種情況下，CSS 也會(huì)暫停構(gòu)建 DOM

二、瀏覽器渲染五個(gè)階段

2.1 第一步：解析HTML標(biāo)簽，構(gòu)建DOM樹(shù)

在這個(gè)階段，引擎開(kāi)始解析html，解析出來(lái)的結(jié)果會(huì)成為一棵dom樹(shù)
dom的目的至少有2個(gè)

• 作為下個(gè)階段渲染樹(shù)狀圖的輸入
• 成為網(wǎng)頁(yè)和腳本的交互界面。(最常用的就是getElementById等等)

當(dāng)解析器到達(dá)script標(biāo)簽的時(shí)候，發(fā)生下面四件事情

1. html解析器停止解析,
2. 如果是外部腳本，就從外部網(wǎng)絡(luò)獲取腳本代碼
3. 將控制權(quán)交給js引擎，執(zhí)行js代碼
4. 恢復(fù)html解析器的控制權(quán)

由此可以得到第一個(gè)結(jié)論1

• 由于<script>標(biāo)簽是阻塞解析的，將腳本放在網(wǎng)頁(yè)尾部會(huì)加速代碼渲染。
• defer和async屬性也能有助于加載外部腳本。
• defer使得腳本會(huì)在dom完整構(gòu)建之后執(zhí)行；
• async標(biāo)簽使得腳本只有在完全available才執(zhí)行，并且是以非阻塞的方式進(jìn)行的

2.2 第二步：解析CSS標(biāo)簽，構(gòu)建CSSOM樹(shù)

• 我們已經(jīng)看到html解析器碰到腳本后會(huì)做的事情，接下來(lái)我們看下html解析器碰到樣式表會(huì)發(fā)生的情況
• js會(huì)阻塞解析，因?yàn)樗鼤?huì)修改文檔(document)。css不會(huì)修改文檔的結(jié)構(gòu)，如果這樣的話，似乎看起來(lái)css樣式不會(huì)阻塞瀏覽器html解析。但是事實(shí)上 css樣式表是阻塞的。阻塞是指當(dāng)cssom樹(shù)建立好之后才會(huì)進(jìn)行下一步的解析渲染

通過(guò)以下手段可以減輕cssom帶來(lái)的影響

• 將script腳本放在頁(yè)面底部
• 盡可能快的加載css樣式表
• 將樣式表按照media type和media query區(qū)分，這樣有助于我們將css資源標(biāo)記成非阻塞渲染的資源。
• 非阻塞的資源還是會(huì)被瀏覽器下載，只是優(yōu)先級(jí)較低

2.3 第三步：把DOM和CSSOM組合成渲染樹(shù)（render tree）

image.png

2.4 第四步：在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)

布局(layout)：定位坐標(biāo)和大小，是否換行，各種position, overflow, z-index屬性

2.5 調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上

將渲染樹(shù)的各個(gè)節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制painting

三、渲染優(yōu)化相關(guān)

3.1 Load 和 DOMContentLoaded 區(qū)別

• Load 事件觸發(fā)代表頁(yè)面中的 DOM，CSS，JS，圖片已經(jīng)全部加載完畢。
• DOMContentLoaded 事件觸發(fā)代表初始的 HTML 被完全加載和解析，不需要等待 CSS，JS，圖片加載

3.2 圖層

一般來(lái)說(shuō)，可以把普通文檔流看成一個(gè)圖層。特定的屬性可以生成一個(gè)新的圖層。不同的圖層渲染互不影響，所以對(duì)于某些頻繁需要渲染的建議單獨(dú)生成一個(gè)新圖層，提高性能。但也不能生成過(guò)多的圖層，會(huì)引起反作用。

通過(guò)以下幾個(gè)常用屬性可以生成新圖層

• 3D 變換：translate3d、translateZ
• will-change
• video、iframe 標(biāo)簽
• 通過(guò)動(dòng)畫(huà)實(shí)現(xiàn)的 opacity 動(dòng)畫(huà)轉(zhuǎn)換
• position: fixed

3.3 重繪（Repaint）和回流（Reflow）

重繪和回流是渲染步驟中的一小節(jié)，但是這兩個(gè)步驟對(duì)于性能影響很大

• 重繪是當(dāng)節(jié)點(diǎn)需要更改外觀而不會(huì)影響布局的，比如改變 color 就叫稱為重繪
• 回流是布局或者幾何屬性需要改變就稱為回流。

回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流?；亓魉璧某杀颈戎乩L高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流

以下幾個(gè)動(dòng)作可能會(huì)導(dǎo)致性能問(wèn)題

• 改變 window 大小
• 改變字體
• 添加或刪除樣式
• 文字改變
• 定位或者浮動(dòng)
• 盒模型

很多人不知道的是，重繪和回流其實(shí)和 Event loop 有關(guān)

• 當(dāng) Event loop 執(zhí)行完Microtasks 后，會(huì)判斷 document 是否需要更新。因?yàn)闉g覽器是 60Hz 的刷新率，每 16ms 才會(huì)更新一次。
• 然后判斷是否有 resize 或者 scroll ，有的話會(huì)去觸發(fā)事件，所以 resize 和 scroll 事件也是至少 16ms才會(huì)觸發(fā)一次，并且自帶節(jié)流功能。
• 判斷是否觸發(fā)了 media query
• 更新動(dòng)畫(huà)并且發(fā)送事件
• 判斷是否有全屏操作事件
• 執(zhí)行 requestAnimationFrame 回調(diào)
• 執(zhí)行 IntersectionObserver 回調(diào)，該方法用于判斷元素是否可見(jiàn)，可以用于懶加載上，但是兼容性不好
• 更新界面
• 以上就是一幀中可能會(huì)做的事情。如果在一幀中有空閑時(shí)間，就會(huì)去執(zhí)行 requestIdleCallback 回調(diào)

常見(jiàn)的引起重繪的屬性

• color
• border-style
• visibility
• background
• text-decoration
• background-image
• background-position
• background-repeat
• outline-color
• outline
• outline-style
• border-radius
• outline-width
• box-shadow
• background-size

3.4 常見(jiàn)引起回流屬性和方法

任何會(huì)改變?cè)貛缀涡畔?元素的位置和尺寸大小)的操作，都會(huì)觸發(fā)重排，下面列一些栗子

• 添加或者刪除可見(jiàn)的DOM元素；
• 元素尺寸改變——邊距、填充、邊框、寬度和高度
• 內(nèi)容變化，比如用戶在input框中輸入文字
• 瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)
• 計(jì)算 offsetWidth 和 offsetHeight 屬性
• 設(shè)置 style 屬性的值

回流影響的范圍

由于瀏覽器渲染界面是基于流失布局模型的，所以觸發(fā)重排時(shí)會(huì)對(duì)周圍DOM重新排列，影響的范圍有兩種

• 全局范圍：從根節(jié)點(diǎn)html開(kāi)始對(duì)整個(gè)渲染樹(shù)進(jìn)行重新布局。
• 局部范圍：對(duì)渲染樹(shù)的某部分或某一個(gè)渲染對(duì)象進(jìn)行重新布局

全局范圍回流

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>

當(dāng)p節(jié)點(diǎn)上發(fā)生reflow時(shí)，hello和body也會(huì)重新渲染，甚至h5和ol都會(huì)收到影響

局部范圍回流

用局部布局來(lái)解釋這種現(xiàn)象：把一個(gè)dom的寬高之類的幾何信息定死，然后在dom內(nèi)部觸發(fā)重排，就只會(huì)重新渲染該dom內(nèi)部的元素，而不會(huì)影響到外界

3.5 減少重繪和回流

使用 translate 替代 top

<div class="test"></div>
<style>
    .test {
        position: absolute;
        top: 10px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<script>
    setTimeout(() => {
        // 引起回流
        document.querySelector('.test').style.top = '100px'
    }, 1000)
</script>

• 使用 visibility 替換 display: none ，因?yàn)榍罢咧粫?huì)引起重繪，后者會(huì)引發(fā)回流（改變了布局）
• 把 DOM 離線后修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然后你修改100次，然后再把它顯示出來(lái)
• 不要把 DOM 結(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量

for(let i = 0; i < 1000; i++) {
    // 獲取 offsetTop 會(huì)導(dǎo)致回流，因?yàn)樾枰カ@取正確的值
    console.log(document.querySelector('.test').style.offsetTop)
}

• 不要使用 table 布局，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局
• 動(dòng)畫(huà)實(shí)現(xiàn)的速度的選擇，動(dòng)畫(huà)速度越快，回流次數(shù)越多，也可以選擇使用 requestAnimationFrame
• CSS選擇符從右往左匹配查找，避免 DOM深度過(guò)深
• 將頻繁運(yùn)行的動(dòng)畫(huà)變?yōu)閳D層，圖層能夠阻止該節(jié)點(diǎn)回流影響別的元素。比如對(duì)于 video標(biāo)簽，瀏覽器會(huì)自動(dòng)將該節(jié)點(diǎn)變?yōu)閳D層。

image.png

重繪與回流 http://blog.poetries.top/2018/01/12/fed-performance-optimization/#%E5%85%AD%E3%80%81%E9%87%8D%E7%BB%98%E4%B8%8E%E5%9B%9E%E6%B5%81