瀏覽器的渲染與頁面優化

Peter Chang
Jun 30, 2018 · 6 min read

一個高流𣈱度的網頁,就是一件藝術作品。網頁工匞必須具備三元素知識,:HTMLJavascriptCSS。除了寫出高質量的程式碼,也要確保相關的第三方程式碼是高品質的。

這篇文章,是整理2位巨人 Paul LewisIlya Grigorik 的文章,在討論瀏覽器的渲染過程,和 Rendering Tree 對生成頁面組成。當電腦的速度變慢,我們至少知道要加入更強大的 CPU 或 RAM,才能對症下藥。瀏覽器的優化一樣要對症下藥。

1. 記住 60fps

大部份的裝置:手機和電腦,畫面每秒更新60次 (60 frame pre second 又叫60幀)。當網頁要完成一個動畫,或完成滾動動作,瀏覽器需要協調網頁和裝置,每一次更新畫面時,放入對應的新圖片,以完成動畫。

理論上每幀所消耗的成本是 16ms (1 second / 60 = 16.66ms),實際上瀏覽器每秒七手八腳地更新 60張新圖片,時間緊迫,我們必須在 10ms 內完成處理變動的圖片。當無法在 10ms 內完成工作, fps 就會下降,出現畫面遲鈍;當程式的 fps 高於 60fps,就會造成資源浪費(jank),用戶體驗差。所以最優化的狀況是每秒更新 60次 (60fps)

2. 像素化五步曲

像素化過程 The pixel pipeline

關於渲染,瀏覽器可分成5個部份,Pixel Pipeline (像素化過程),也是網頁流𣈱度進行優化的5把鑰匙。

https://developers.google.com/web/fundamentals/performance/rendering/
  • JavaScript. 基本上 Javascript 用作處理網頁畫面的改變,可以是動作,資料的排序或新增 DOM 元素。

五個步驟網頁資源浪費(Jank)的嫌疑犯,就是上面提到的五個步驟。你必須全盤掌握你所寫的程式碼,到底在將像數化過程(Pixel Pipeline)中產生什麼化學反應。

實際情況下, 不必無時無刻觀察着將像化過程的每個細節,一般修改網頁內容,可以收窄為3種渲染方式。

2.1. JS / CSS > Style > Layout > Paint > Composite

影響佈局(Layout),是徹底上的把頁面重畫一次

當網頁上的元素, 被修改到 Layout Property,例如 width, height, 或 left top,瀏覽器需要檢查所有的元素,因為元素間的位置和大小是相互影響,導致整頁需要重再佈局一次,再一次,再合成一次

2.2. JS / CSS > Style > Paint > Composite

改變 畫(Paint) 的相關屬性,成本比較底。

修改的是畫 (Paint) 相關屬性,例如 background image, text color, 或 shadows,一些和佈局 (Layout) 獨立無關的改變,瀏覽器會略過佈局,由畫(paint)步驟開始更新頁面。

2.3. JS / CSS > Style > Composite

既不是佈局(Layout),又不是畫(Paint),就是最輕量。

像素化五步曲中,最後一步合成(Composite)的變動是最便宜。例如常常出現的頁面上下滾動和元件的動畫,大家最渴望見到的情況是,在滾動和動畫出現的生命週期中,影響到的屬性只有合成
瀏覧器既不需要更新佈局,又不需要畫一次。


Remark

visibility: hiddendisplay: none 的不同處。前者在畫面上佔有空間,被渲染成一個空的元素,不被看到;後者將會從Render Tree 中消失。

CSSOM & DOM trees

CSSOM 樹 和 DOM 樹的組合,成為渲染樹 (Render Tree),它是用來運算元素佈局 (Layout) 和像素化(Pixel Pipeline) 上色到屏幕,而且最優化這一系列的過程。

  • DOM Tree 和 CSSOM Tree 組合成 Render tree.

Reference

https://developers.google.com/web/fundamentals/performance/rendering/

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

Peter Chang

Written by

Algorithm Artist and tech blogger from Macau, Front-end Engineer in @Oriente. Specialist in Javascript, React and Node.js. https://goo.gl/gdkt3x

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade