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

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

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

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

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

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

具體如下圖過程如下圖所示

image.png

image.png

渲染

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

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

• 在構(gòu)建 CSSOM 樹時(shí)，會(huì)阻塞渲染分扎，直至 CSSOM樹構(gòu)建完成澄成。并且構(gòu)建 CSSOM 樹是一個(gè)十分消耗性能的過程，所以應(yīng)該盡量保證層級(jí)扁平畏吓，減少過度層疊墨状，越是具體的 CSS 選擇器，執(zhí)行速度越慢
• 當(dāng) HTML 解析到 script 標(biāo)簽時(shí)菲饼，會(huì)暫停構(gòu)建 DOM肾砂，完成后才會(huì)從暫停的地方重新開始。也就是說宏悦，如果你想首屏渲染的越快镐确，就越不應(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樹

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

• 作為下個(gè)階段渲染樹狀圖的輸入
• 成為網(wǎng)頁和腳本的交互界面荣堰。(最常用的就是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)頁尾部會(huì)加速代碼渲染。
• defer和async屬性也能有助于加載外部腳本屡拨。
• defer使得腳本會(huì)在dom完整構(gòu)建之后執(zhí)行；
• async標(biāo)簽使得腳本只有在完全available才執(zhí)行褥实，并且是以非阻塞的方式進(jìn)行的

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

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

通過以下手段可以減輕cssom帶來的影響

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

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

image.png

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

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

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

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

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

3.1 Load 和 DOMContentLoaded 區(qū)別

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

3.2 圖層

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

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

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

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

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

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

回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流吆你∠乙叮回流所需的成本比重繪高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流

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

• 改變 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)畫并且發(fā)送事件
• 判斷是否有全屏操作事件
• 執(zhí)行 requestAnimationFrame 回調(diào)
• 執(zhí)行 IntersectionObserver 回調(diào)械巡，該方法用于判斷元素是否可見媒熊，可以用于懶加載上，但是兼容性不好
• 更新界面
• 以上就是一幀中可能會(huì)做的事情坟比。如果在一幀中有空閑時(shí)間芦鳍，就會(huì)去執(zhí)行 requestIdleCallback 回調(diào)

常見的引起重繪的屬性

• 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 常見引起回流屬性和方法

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

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

回流影響的范圍

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

• 全局范圍：從根節(jié)點(diǎn)html開始對(duì)整個(gè)渲染樹進(jìn)行重新布局。
• 局部范圍：對(duì)渲染樹的某部分或某一個(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ì)收到影響

局部范圍回流

用局部布局來解釋這種現(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次，然后再把它顯示出來
• 不要把 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)畫實(shí)現(xiàn)的速度的選擇，動(dòng)畫速度越快扭倾，回流次數(shù)越多次哈，也可以選擇使用 requestAnimationFrame
• CSS選擇符從右往左匹配查找，避免 DOM深度過深
• 將頻繁運(yùn)行的動(dòng)畫變?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