簡介目前 Chrome v.47 timeline 的用法跟如何運用觀察後發現的問題調效動畫效能

1. CHROME 佛心做了 DEVTOOL
就是要用啊！？
從 Timeline 學調效動畫效能
PIXNET - YVONNE

2. 圖⽚片來源：http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
RAIL

3. 動畫感覺要順暢<<<
60FPS
16.66ms
60 Frames per second
1000ms/60 約 一個 Frame 跑

4. 開始/關閉錄製
清除紀錄
開啟/關閉篩選器
強制 garbage collection
切換 view
(waterfall/chart)
是否紀錄：
JS 詳細記錄、記憶體、
詳細繪製記錄、喀圖
篩選器

5. Frame
Timeline: Flame chart view
紅色箭頭 = jank
（missed frame)

6. Jank
圖片來源：http://jankfree.org/jank-busters-io-2013/template.html#1

7. 60fps標竿
bar 越⾼高 frame 時間越⻑⾧長
event references timeline
簡易分配圖

8. 用顏色區分目前的作業分佈

9. 顏色意義可參考
可是為了增加易讀性
配色會變更

10. Records Color
Scripting
Rendering
Painting
Loading Event
Other
收發 Request, 解析 HTML 等
執行 JavaScript
計算 styles 跟 layout
在 layers 上繪製 pixels
並合成 layers
其他 Chrome 無法分析的數據

11. Timeline: waterfall view
⽤用顏⾊色秒懂⼯工作性質

12. 選取⾃自訂範圍
shift + 滑⿏鼠
點選 frame 或 recode 取得詳細資料
範圍內工作性質的
圓餅分布圖
在 JavaScript 上
花費最多時間
Timeline: Flame chart view

13. ⿈黃⾊色 ＝有效能問題
Stack Traces
找出是哪個環節導致問題
Warning 類型
Timeline: waterfall view

14. Aggregated Details
圖⽚片來源：https://developers.google.com/web/updates/2015/08/devtools-digest-aggregated-timeline-details?hl=en
彙整 by 花最久時間的 functions
分組統計 ：不分組、domain
、sub-domain、URL
快速分析
third-party 帶來的影響

15. 圖⽚片來源：http://cwwany.pixnet.net/blog/post/32583543
找到效能問題點後，該怎麼開始呢？

16. 開啟 JS Profile 看細節

17. 增加執⾏行 JavaScript 的效能
‧ 優化運算演算法
‧ 使用 Web Worker 運算複雜的運算
- e.g. sorting 或是 searching
‧ 當畫面有需求變更時，使用 requestAnimationFrame

18. requestAnimationFrame
‧ 避免造成 JS callback 在 frame 跟 frame 之間執行，造
成 miss frame 後出現 jank。確保 JS 在 frame 第一個
執行
使用 setTimeout 製作的動畫改用 requestAnimationFrame

19. 避免微優化，focus on 大方向
不要過度修改像：
“改用 getBoundingClientRect 會讓效能快上一點點喔“
每個瀏覽器跟系統的實作不同，不一定每次都是正確的！

20. Rendering & Painting 效能
Pixel 如何繪製到畫面上五個主要步驟
Pixel Pipeline
步驟越少所花時間就會減少

21. CSS Triggers

22. Layout
‧ 當修改 element 的 geometry (e.g. width, top,etc)
會造成瀏覽器必須檢查頁面上所有其他的 elements
並且 reflow 頁面。
function 造成 Layout
Layout 所花的時間
共有多少 elements 受影響
開始 layout 的 root element

23. Layout 常⾒見問題
Forced Synchronous Layout
‧ 發生讓 layout 行為跟 JavaScript 同步執行的時候
因為加上 super-big class，console.log 需要先等跑 layout
計算完改變後正確的 style 後，才能把 offsetHeight log 出來

24. Layout 常⾒見問題
Forced Synchronous Layout
‧ 確保 『讀』在『寫』之前執行。
因為先讀出 offsetHeight 後，才寫入新 class。
沒有造成強制 layout 行為

25. 有些需求是必須 trigger forced
synchronous layout 才能實現的...orz
所以重點是次數不能太多！！！

26. Layout 常⾒見問題
Layout Thrashing
‧ 大量的 Forced Synchronous Layout
因 element offsetTop 已經被 update 了，
所以在 assign 之前需要重新計算出新 value 後，才能執行 assign。

27. Layout 常⾒見問題
Layout Thrashing
DEMO

28. 增加執⾏行 Layout 效能
‧ 避免使用會造成 Layout 的屬性，不呼叫 Layout 最
好（geometric properties）
‧ 修改樣式時，使用 flexbox 取代 float (IE GG)
‧ 減少 selectors 的數量
‧ 減少 css selectors 的複雜度
在大多數的情況下，因為 selector matching 已經超級快了。
所以 refactor selectors 的進步空間通常不大...
少 trigger Layout 才是王道！！！

29. 檢視 Paint 效能
打開 Enable paint flashing
快速得知⺫⽬目前 painting 區塊
綠⾊色表⽰示 painting

30. 開啟 Paint 看細節
enable Paint view
可從 paint profiler 看細節
select paint recode

31. Paint Profiler
(pink) - shapes (blue) - bitmap
(green) - text (purple) - misc
painting stack
bar 越⾼高表⽰示花約多時間
分布 pie chart

32. 增加執⾏行 Paint 效能
‧ 使用 transform and opacity property 製作動畫
圖⽚片來源：https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count?hl=en
認真想想，其實大部份的需求都可以用以下 property 完成

33. 增加執⾏行 Paint 效能
‧ 動畫記得使用 will-change 可以讓該 element 有自己
的 compositor layer
‧ 不支援 will-change 可用 transform: translateZ(0)
(檢查：can i use will-change）
‧ 避免 TOO MUCH ! 太多 Layers 會花更多 memory

34. Layers Tab
layer
stack
操作 3D layer view (放大、旋轉等)
右鍵選單：
“Reveal in Elements Panel”
可到指定的 element
layer 怎麼形成的
預計花費的
memory

35. ‧ 當有需要再開啟特定 Captures，因為額外工作可能
會影響紀錄正確性。
‧ 錄製活動越單純越好，減少紀錄複雜性，更能找出問
題重點。
‧ 環境越乾淨越好，甚至直接用無痕式視窗。
- 注意，Chrome plugins 本身的活動也會被紀錄喔。
使⽤用 Timeline 注意事項

36. 以上截圖使⽤用
CHROME 版本V.47
很重要...
因為 Chrome Timeline 樣式每升級一次就不太一樣...

37. REFERENCES
‧ render performance - Chrome developers＊
‧ csstriggers.com
‧ print profiler - Chrome developers
‧ Timeline - Devtools
‧ pixels are expensive - aerotwist
‧ Accelerated Rendering in Chrome - The Layer Model
‧ How (not) to trigger a layout in WebKit
‧ layout thrashing cheatsheets
‧ Chrome 性能调优简介 - Tsung
‧ How to look performance - Chrome developers
* 主要重要來源

38. THANK YOU