CHROME 佛心做了 DEVTOOL 就是要用啊！？

從 Timeline 學調效動畫效能 PIXNET - YVONNE

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

RAIL

動畫感覺要順暢<<<

60FPS

16.66ms

60 Frames per second

1000ms/60 約 一個 Frame 跑

開始/關閉錄製

清除紀錄

開啟/關閉篩選器

強制 garbage collection

切換 view(waterfall/chart)

是否紀錄： JS 詳細記錄、記憶體、

詳細繪製記錄、喀圖

篩選器

Frame

Timeline: Flame chart view

紅色箭頭 = jank（missed frame)

Jank

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

60fps標竿bar 越⾼高 frame 時間越⻑⾧長

event references timeline

簡易分配圖

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

顏色意義可參考可是為了增加易讀性

配色會變更

Records Color

Scripting

Rendering

Painting

Loading Event

Other

收發 Request, 解析 HTML 等

執行 JavaScript

計算 styles 跟 layout

在 layers 上繪製 pixels並合成 layers

其他 Chrome 無法分析的數據

Timeline: waterfall view

⽤用顏⾊色秒懂⼯工作性質

選取⾃自訂範圍shift + 滑⿏鼠

點選 frame 或 recode 取得詳細資料

範圍內工作性質的圓餅分布圖

在 JavaScript 上 花費最多時間

Timeline: Flame chart view

⿈黃⾊色 ＝有效能問題

Stack Traces找出是哪個環節導致問題

Warning 類型

Timeline: waterfall view

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 帶來的影響

圖⽚片來源：http://cwwany.pixnet.net/blog/post/32583543

找到效能問題點後，該怎麼開始呢？

開啟 JS Profile 看細節

增加執⾏行 JavaScript 的效能

‧ 優化運算演算法

‧ 使用 Web Worker 運算複雜的運算- e.g. sorting 或是 searching

‧ 當畫面有需求變更時，使用 requestAnimationFrame

requestAnimationFrame

‧ 避免造成 JS callback 在 frame 跟 frame 之間執行，造成 miss frame 後出現 jank。確保 JS 在 frame 第一個執行

使用 setTimeout 製作的動畫改用 requestAnimationFrame

避免微優化，focus on 大方向

不要過度修改像：“改用 getBoundingClientRect 會讓效能快上一點點喔“ 每個瀏覽器跟系統的實作不同，不一定每次都是正確的！

Rendering & Painting 效能

Pixel 如何繪製到畫面上五個主要步驟

Pixel Pipeline

步驟越少所花時間就會減少

CSS Triggers

Layout

‧ 當修改 element 的 geometry (e.g. width, top,etc) 會造成瀏覽器必須檢查頁面上所有其他的 elements 並且 reflow 頁面。

function 造成 Layout

Layout 所花的時間

共有多少 elements 受影響

開始 layout 的 root element

Layout 常⾒見問題 Forced Synchronous Layout

‧ 發生讓 layout 行為跟 JavaScript 同步執行的時候

因為加上 super-big class，console.log 需要先等跑 layout 計算完改變後正確的 style 後，才能把 offsetHeight log 出來

Layout 常⾒見問題 Forced Synchronous Layout

‧ 確保 『讀』在『寫』之前執行。

因為先讀出 offsetHeight 後，才寫入新 class。 沒有造成強制 layout 行為

有些需求是必須 trigger forced synchronous layout 才能實現的...orz

所以重點是次數不能太多！！！

Layout 常⾒見問題 Layout Thrashing

‧ 大量的 Forced Synchronous Layout

因 element offsetTop 已經被 update 了，所以在 assign 之前需要重新計算出新 value 後，才能執行 assign。

Layout 常⾒見問題 Layout Thrashing

DEMO

增加執⾏行 Layout 效能

‧ 避免使用會造成 Layout 的屬性，不呼叫 Layout 最好（geometric properties）

‧ 修改樣式時，使用 flexbox 取代 float (IE GG)

‧ 減少 selectors 的數量

‧ 減少 css selectors 的複雜度

在大多數的情況下，因為 selector matching 已經超級快了。 所以 refactor selectors 的進步空間通常不大...

少 trigger Layout 才是王道！！！

檢視 Paint 效能

打開 Enable paint flashing 快速得知⺫⽬目前 painting 區塊

綠⾊色表⽰示 painting

開啟 Paint 看細節

enable Paint view

可從 paint profiler 看細節

select paint recode

Paint Profiler(pink) - shapes (blue) - bitmap

(green) - text (purple) - misc

painting stack

bar 越⾼高表⽰示花約多時間

分布 pie chart

增加執⾏行 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 完成

增加執⾏行 Paint 效能

‧ 動畫記得使用 will-change 可以讓該 element 有自己的 compositor layer

‧ 不支援 will-change 可用 transform: translateZ(0) (檢查：can i use will-change）

‧ 避免 TOO MUCH ! 太多 Layers 會花更多 memory

Layers Tab

layerstack

操作 3D layer view (放大、旋轉等)

右鍵選單：“Reveal in Elements Panel”

可到指定的 element

layer 怎麼形成的

預計花費的 memory

‧ 當有需要再開啟特定 Captures，因為額外工作可能會影響紀錄正確性。

‧ 錄製活動越單純越好，減少紀錄複雜性，更能找出問題重點。

‧ 環境越乾淨越好，甚至直接用無痕式視窗。- 注意，Chrome plugins 本身的活動也會被紀錄喔。

使⽤用 Timeline 注意事項

以上截圖使⽤用 CHROME 版本V.47

很重要...因為 Chrome Timeline 樣式每升級一次就不太一樣...

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

* 主要重要來源

THANK YOU