SHOW ME THE PAGE 介紹 Critical Rendering Path By Yvonne Yu
SHOW ME THE PAGE介紹 Critical Rendering Path
By Yvonne Yu
⾃自我介紹暨⼯工商服務
www.ssaab
圖⽚片來源:http://blog.xuite.net/tj41920/tj419201/318188942
??
究竟瀏覽器怎麼呈現網站的呢?
HTML
CSS
JavaScript
Critical Rendering Path關鍵 渲染 路徑
從瀏覽器收到資料後到初始化網站畫⾯面中間所經歷 渲染 網⾴頁
畫⾯面的過程
會影響到從無到渲染畫⾯面前的事情
為什麼要認識 Critical Rendering Path?
效能很重要!空⽩白畫⾯面讓⼈人抓狂!
等了快10秒了...
圖⽚片來源:Google Developers - Critical Rendering Path
效能好
效能不好
Critical Rendering Path
Critical Rendering Path
究竟,Critical Rendering Path 中間發⽣生什麼事情呢?
GETHTML
NetworkCSS CSSOM
HTML DOM
圖⽚片參考:https://www.igvita.com/slides/2013/fluent-perfcourse.pdf
JavaScriptRender
Tree Layout Paint
Critical Rendering Path
從簡單的範例開始吧~
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 goods
注意!只要跟 server 要求的資料,都會經過以上步驟!!
開始解析 HTML
HTMLDocument Object Model ⽂文件物件模型
『⼀一種語⾔言介⾯面提供了⼀一個⽂文件(樹)的結構化表⽰示法,並定義讓程式可以存取並改變⽂文件架
構、⾵風格和內容的⽅方法。DOM 提供了⽂文件以擁有屬性與函式的節點與物件組成的結構化表⽰示。』- from mozilla developer network
DOM
怎麼從 HTML 解析成 DOM︖?
圖⽚片來源:Google developers - constructing the object model
開始解析 HTML DOM
GETHTML HTML DOM
HTML
head
metatitle
linklink!?
title
HTML
CSS is Critical(關鍵的)!
GETHTML
NetworkCSS CSSOM
DOM HT DO
CS CSS
HTML
head
meta
body
plink
開始下載並取得 CSS ,且解析建⽴立 CSSOM
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 物件模型
title
Image is NOT Critical
開始下載圖⽚片,建⽴立 Img DOM Node, 然後持續解析 DOM…
HTML
headbody
pmeta link
img
圖⽚片不會讓 DOM 停⽌止解析, 並不在 Critical Rendering Path 流程中
JavaScript is Critical !
HTML
GETHTML
Network CSS CSSOM
DOM
JavaScript
title
HTML
headbody
pmeta link
imgscript
HTM DO
CSSOCSS
JavaScript 可動態改變 DOM 跟 CSSOM
JavaScript
JavaScript is Critical !
假如⺫⽬目前有 CSSOM 正在解析中的話,瀏覽器會先確定 Critical CSS 有載⼊入且解析完成後,才會執⾏行載⼊入完畢的 JavaScript
HTML
GETHTML
Network CSS CSSOM
DOM
JavaScript
HTM DO
JavaScript
2. CSSOM 會全部解析完畢
3. 才會開始執⾏行 JavaScript
1. 解析 DOM 是暫停的!
DOM 全部解析完畢
HTML
GETHTML
Network CSS CSSOM
DOM
JavaScript
title
HTML
headbody
pmeta link
imgscript
DOMContentLoaded event jQuery(document).ready
等等!這時候畫⾯面還沒有出現喔!
GETHTML
NetworkCSS CSSOM
HTML DOM
JavaScriptRender
Tree Layout Paint
Critical Rendering Path
建⽴立 Render Tree
描述內容 描述樣式
圖⽚片來源:render tree construction
Render Tree 只會含有『可⾒見的』Node,被 CSS 隱藏的 display:none 或是無法被察覺的 Node ( scripts, meta) 皆會被省略在 Render Tree 中
Layout & Paint
Layout (reflow) - 依照 Render Tree 內容計算在螢幕上視埠 (viewpoint) 確切的 pixel size 跟 位置(幾何資訊)。
painting (rasterizing) - 把在 Layout 計算完成的 Node 資訊,繪製在瀏覽器上
Render Tree Layout Paint
圖⽚片來源:render tree construction
Critical Rendering Path 總結
GETHTML
NetworkCSS CSSOM
HTML DOM
JavaScriptRender
Tree Layout Paint
取得HTML 解析DOM
GET CSS CSSOM
GET JS 跑 JS
停⽌止解析等 JS 跑完
等 CSSOM 完成
Render Page
計算 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
1.0 秒
網站需載⼊入過⼤大外部 Critical 檔案
圖⽚片來源
網站需載⼊入過多外部 Critical 檔案, 造成Critical Rendering Path 太久,
使⽤用者很晚看到 first paint
圖⽚片來源
Critical Rendering Path關鍵 渲染 路徑
網站上裡關鍵、重要的!
什麼是 Critical CSS !?
圖⽚片來源:CSS and the critical 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
0.01s
0.01s 資料來源
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
優化 Critical Rendering Path 效能
✓ 區分 critical CSS 跟 non-critical CSS,並使⽤用 Inline CSS <style> 載⼊入 critical CSS。 - 減少 ⼀一次 Request 的時間! - 假如 CSS 檔案不⼤大,不需硬拆成多份檔案。✓ 把 CSS 放在 head 標籤裡,樣式越快先處理越好。因為
需要等 CSSOM 完成才會開始 render page
優化 Critical Rendering Path 效能
✓JavaScript 改成⾮非同步載⼊入 (async),讓 JavaScript 準備好之前不會禁⽌止 DOM 建構作業 - 改成 async 無法確保 JavaScript 執⾏行順序 - 在畫⾯面顯⽰示時,假如 JavaScript 沒有準備執⾏行,畫⾯面要確保不會有問題
CanIUse.com
更多優化效能關鍵字
Pixel Pipeline 因 JavaScript 可修改 DOM 跟 CSSOM,修改後可能會重新計算 DOM 的 style, layout 等資訊。暸解後對動畫跟使⽤用者體驗加分
(Udacity 線上教學網址)
HTTP/2 傳輸協定
(Google Dev Summit - HTTP2 101 教學)
經過 16 年,HTTP/2 終於在 2015 年正式發佈。改進了很多現在依然普遍的 HTTP 1.1 限制(另如,Header 壓縮等)
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
Q&A