Web Performance using Chrome Canary 52

Transcript

1. Afu Tseng (曾坤福) PIXNET 研發中⼼前端組 Web Performance using 
 Chrome Canary 52 Travel 會議室∘2016.05.20
2. 今天要導讀的是 … 
   
   
3. Web Performance Tooling 
 Google I/O 2016 
   
   
4. 測量 -> 詮釋花費 -> 辨別瓶頸 -> 嘗試修正 
   
   
5. 案例研究 - android.com/auto
6. First Paint @ 1500ms 
   
   
7. 轉啊轉~ 
   
   
8. ~4500ms 才載⼊完成 hero image 
   
   
9. 第⼀次 Paint 到主圖載⼊的時間能否縮短？ 
   
   
10. ⽤ Timeline 錄製網路傳輸狀況 * Chrome Canary 52+ only now 
    
    
11. 主圖載⼊後觸發 Page Load Event https://www.android.com/static/img/banners/auto-768.jpg 
    
    
12. 主圖載⼊花費 1.04s https://www.android.com/static/img/banners/auto-768.jpg 
    
    
13. https://www.android.com/static/img/banners/auto-768.jpg T 
    
    
14. 觀察圖⽚元素各屬性找線索 
    
    
15. 猜測是 
 js-header-animate-image, loaded 這些 class 
    
    
16. Command + shift + p 打開捷徑⾯板 
    
    
17. 輸⼊ search 
    
    
18. 在下⽅⾯板搜尋 js-header-animate-image 
    
    
19. 找到抓取該 selector 的變數 this.headerImage_ 
    
    
20. 該 DOM 元素若存在，呼叫 this.loadContent() 
    
    
21. 每隔⾄少 1s 檢查元素的 class 是否有 loaded 1E3 = 1000ms = 1s 
    
    
22. 嘿！你載⼊完成了沒？ 嘿！你載⼊完成了沒？ 嘿！你載⼊完成了沒？ 
    
    
23. 修正⽅向思考 • 1 秒過⻑，能否縮短檢查間隔？ • Hero Image 主圖的淡⼊動畫是必要的嗎？ • ⽤純 CSS3 實作是否更適合？ • 主圖 456KB，載⼊時間 1.04s，嘗試降低品質削減體積？ • ⼿機版使⽤的主圖是 768x579，是否過於浪費？ • 圖⽚尺⼨ > 顯⽰尺⼨時瀏覽器須要額外的 CPU 運算縮 放，Paint 時間也較⻑ 
    
    
24. 總結 前端開發者可嘗試安裝 Canary 以優先體驗 DevTools 新功能，幫助網站效能調校便利性
25. References Web Performance Tooling - Google I/O 2016, https:// www.youtube.com/watch?v=iMqi55rcR00 ! https://www.youtube.com/playlist?list=PLNYkxOF6rcIDz1TzmmMRBC- kd8zPRTQIP, Web and Chrome at Google I/O 2016 (半夜做簡報時已有 5 部影⽚，現在已有 14 部) ! case study - https://www.android.com/auto ! case study - http://www.modern-web.org/ ! Utilize glob ignore option for massive perf win, https://github.com/ eslint/eslint/pull/6215 
    
    
26. Q & A @afutseng