呈現一個網頁大都需要 HTML, CSS, JavaScript 等靜態資料。 當我們把每一份檔案準備好時，瀏覽器就像施了魔法一樣呈現出來了。 究竟瀏覽器是怎麼解析這些資料並轉換成一個一個的網頁呢？ 讓我們一起來暸解 critical rendering path （關鍵渲染路徑）吧！

1. SHOW ME THE PAGE
介紹 Critical Rendering Path
By Yvonne Yu

2. ⾃自我介紹暨⼯工商服務

3. www.ssaab
圖⽚片來源：http://blog.xuite.net/tj41920/tj419201/318188942
?
?
究竟瀏覽器怎麼
呈現網站的呢？

4. HTML
CSS
JavaScript

5. Critical Rendering Path
關鍵 渲染 路徑
從瀏覽器收到資料後到初始化
網站畫⾯面中間所經歷 渲染 網⾴頁
畫⾯面的過程
會影響到從無到渲染畫⾯面前的事情

6. 為什麼要認識
Critical Rendering Path？

7. 效能很重要！
空⽩白畫⾯面讓⼈人抓狂！
等了快10秒了...

8. 圖⽚片來源：Google Developers - Critical Rendering Path
效能好
效能不好
Critical Rendering Path
Critical Rendering Path

9. 究竟，Critical Rendering
Path 中間發⽣生什麼事情呢？

10. GET
HTML
Network
CSS CSSOM
HTML DOM
圖⽚片參考：https://www.igvita.com/slides/2013/fluent-perfcou
JavaScript
Render
Tree
Layout Paint
Critical Rendering Path

11. 從簡單的範例開始吧～

12. Network - 跟 server 要求資源
★ DNS Lookup - 依照 domain name 找尋 server 真正的 IP 位址
★ New TCP Connection - handshake roundtrip to the server
★ Http Request - 對 server 最少會有⼀一次 roundtrip
（包含 server 處理 request 的時間）
圖⽚片來源：google - Delivering the go
注意！只要跟 server 要求的資料，都會經過以上步驟！！

13. 開始解析 HTML
HTML
Document Object Model
⽂文件物件模型
『⼀一種語⾔言介⾯面提供了⼀一個⽂文件（樹）的結構化
表⽰示法，並定義讓程式可以存取並改變⽂文件架
構、⾵風格和內容的⽅方法。DOM 提供了⽂文件以擁
有屬性與函式的節點與物件組成的結構化表
⽰示。』- from mozilla developer network
DOM

14. 怎麼從 HTML 解析成 DOM︖？
圖⽚片來源：Google developers - constructing the obj

15. 開始解析 HTML DOM
GET
HTML
HTML DOM
HTML
head
meta
title
linklink!?

16. title
HTML
CSS is Critical（關鍵的）！
GET
HTML
Network
CSS CSSOM
DOMHT DO
CS CSS
HTML
head
meta
body
plink
開始下載並取得 CSS ，且
解析建⽴立 CSSOM

17. CSSOM (CSS Object Model)
CSS
body
p a
acolor: #f00;
font-size: 16px;
text-decoration:
none;
font-size:
16px;
color: #f00;
font-size: 16px;
color: #f00;
font-size: 16px;
CSS 物件模型

18. title
Image is NOT Critical
開始下載圖⽚片，建⽴立 Img DOM Node，
然後持續解析 DOM…
HTML
head
body
p
meta link
img
圖⽚片不會讓 DOM 停⽌止解析，
並不在 Critical Rendering Path 流程中

19. JavaScript is Critical !
HTML
GET
HTML
Network CSS CSSOM
DOM
JavaScript
title
HTML
head
body
p
meta link
imgscript
HTM DO
CSSOCSS
JavaScript 可動態改變
DOM 跟 CSSOM

20. JavaScript
JavaScript is Critical !
假如⺫⽬目前有 CSSOM 正在解析中的話，瀏覽器會先確定 Critical
CSS 有載⼊入且解析完成後，才會執⾏行載⼊入完畢的 JavaScript
HTML
GET
HTML
Network CSS CSSOM
DOM
JavaScript
HTM DO
JavaScript
2. CSSOM 會全部解析完畢
3. 才會開始執⾏行 JavaScript
1. 解析 DOM 是暫停的！

21. DOM 全部解析完畢
HTML
GET
HTML
Network CSS CSSOM
DOM
JavaScript
title
HTML
head
body
p
meta link
imgscript
DOMContentLoaded event
jQuery(document).ready

22. 等等！這時候畫⾯面還沒有出現喔！

23. GET
HTML
Network
CSS CSSOM
HTML DOM
JavaScript
Render
Tree
Layout Paint
Critical Rendering Path

24. 建⽴立 Render Tree
描述內容 描述樣式
圖⽚片來源：render tree construction
Render Tree 只會含有『可⾒見的』Node，被 CSS 隱藏的
display:none 或是無法被察覺的 Node ( scripts, meta) 皆會
被省略在 Render Tree 中

25. Layout ＆ Paint
Layout (reflow) - 依照 Render Tree 內容計算在螢幕上視埠 (viewpoint)
確切的 pixel size 跟 位置（幾何資訊）。
painting (rasterizing) - 把在 Layout 計算完成的 Node 資訊，繪製在瀏覽
器上
Render
Tree
Layout Paint
圖⽚片來源：render tree construction

26. Critical Rendering Path 總結
GET
HTML
Network
CSS CSSOM
HTML DOM
JavaScript
Render
Tree
Layout Paint
取得
HTML
解析DOM
GET CSS CSSOM
GET JS 跑 JS
停⽌止解析等
JS 跑完
等 CSSOM
完成
Render
Page

27. 計算 Critical Rendering Path 時間
取得HTML 解析DOM
GET CSS CSSOM
GET JS 跑 JS
停⽌止解析等
JS 跑完
等 CSSOM
完成
Render
Page10kb, 0.5s
35kb, 0.4s
38kb, 0.4s
0.05s
解析中 0.1s
Critical Rendering Path 的時間：
0.5 + 0.1 + 0.4 (平⾏行下載) + 0.07 約= 1.0 s
0.01s
0.01s

28. 1.0 秒

29. 網站需載⼊入過⼤大外部
Critical 檔案
圖⽚片來源

30. 網站需載⼊入過多外部 Critical 檔案，
造成Critical Rendering Path 太久，
使⽤用者很晚看到 first paint
圖⽚片來源

31. Critical Rendering Path
關鍵 渲染 路徑
網站上裡關鍵、重要的！

32. 什麼是 Critical CSS !?
圖⽚片來源：CSS and the critical path

33. 名詞介紹
‣ 關鍵資源 - 可能禁⽌止網⾴頁初次轉譯的資源。
‣ 關鍵位元組 - 實現網⾴頁初次轉譯所需的總位元組數，這是所有關鍵資源
的傳輸檔案⼤大⼩小總和。
取得HTML 解析DOM
GET CSS CSSOM
GET JS 跑 JS
停⽌止解析等
JS 跑完
等 CSSOM
完成
Render
Page10kb, 0.5s
35kb, 0.4s
38kb, 0.4s
0.05s
解析 0.1s
0.01s
0.01s 資料來源

34. 3 種 關鍵資源（HTML, CSS, JS）
83 kb 關鍵位元組 (HTML + CSS + JS)
取得HTML 解析DOM
GET CSS CSSOM
GET JS 跑 JS
停⽌止解析等
JS 跑完
等 CSSOM
完成
Render
Page10kb, 0.5s
35kb, 0.4s
38kb, 0.4s
0.05s
解析 0.1s
優化 Critical Rendering Path 重點就是讓
關鍵資源越少越⼩小越快下載完畢越好！！
0.01s
0.01s

35. 優化 Critical Rendering Path 效能
✓ 區分 critical CSS 跟 non-critical CSS，並使⽤用 Inline
CSS <style> 載⼊入 critical CSS。
- 減少 ⼀一次 Request 的時間！
- 假如 CSS 檔案不⼤大，不需硬拆成多份檔案。
✓ 把 CSS 放在 head 標籤裡，樣式越快先處理越好。因為
需要等 CSSOM 完成才會開始 render page

36. 優化 Critical Rendering Path 效能
✓JavaScript 改成⾮非同步載⼊入 (async)，讓 JavaScript 準
備好之前不會禁⽌止 DOM 建構作業
- 改成 async 無法確保 JavaScript 執⾏行順序
- 在畫⾯面顯⽰示時，假如 JavaScript 沒有準備執⾏行，畫⾯面要
確保不會有問題
CanIUse.com

37. 更多優化效能關鍵字
Pixel Pipeline
因 JavaScript 可修改 DOM 跟 CSSOM，修改後可能會重新計算
DOM 的 style, layout 等資訊。暸解後對動畫跟使⽤用者體驗加分
(Udacity 線上教學網址)
HTTP/2 傳輸協定
(Google Dev Summit - HTTP2 101 教學)
經過 16 年，HTTP/2 終於在 2015 年正式發佈。改進了很多現在
依然普遍的 HTTP 1.1 限制（另如，Header 壓縮等）

38. References
• Google developers - Critical Rendering Path
• Building Faster Website by Ilya Grigorik
• Delivering the goods by Paul Irish
• CSS and the Critical Path by Patrick Hamann
• Critical Rendering Path by Patrick Sexton
• Understanding the critical rendering path, rendering pages in
1 second by Luis Vieira

39. Q&A