Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
•
22 gefällt mir•3,638 views
簡介目前 Chrome v.47 timeline 的用法跟如何運用觀察後發現的問題調效動畫效能
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Ähnlich wie Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能 (20)
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
- 1. CHROME 佛心做了 DEVTOOL 就是要用啊！？ 從 Timeline 學調效動畫效能 PIXNET - YVONNE
- 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)
- 7. 60fps標竿 bar 越⾼高 frame 時間越⻑⾧長 event references timeline 簡易分配圖
- 8. 用顏色區分目前的作業分佈
- 10. Records Color Scripting Rendering Painting Loading Event Other 收發 Request, 解析 HTML 等 執行 JavaScript 計算 styles 跟 layout 在 layers 上繪製 pixels 並合成 layers 其他 Chrome 無法分析的數據
- 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 帶來的影響
- 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。
- 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