- 原文地址：Chrome DevTools- Performance monitor
- 原文作者：malyw
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：Cherry
- 校對者：萌萌、noahziheng
Chrome DevTools - 效能監控
你是否經常需要 JavaScript 或者 CSS 進行優化，但是不能找到一個簡單的方式來衡量優化的效果？
當然，你可以使用時間軸來記錄，但是在大多數情況下，時間軸只記錄資料，並不是實時更新的。在這點還有其他的效能測量技巧，Chrome DevTools 新增了 “Performance Monitor（效能監控）” 選項卡，可以體現實時效能：
這些都是在 Chrom 穩定版本中可用的並且可以進行以下效能監控：
- 開啟 URL：“chrome://flags/#enable-devtools-experiments”
- 將 “Developer Tools experiments” 選項設定為“啟用”
- 點選 “Relaunch now” 來重啟 Chrome
- 開啟 Chrome DevTools (快捷鍵為 CMD/CTRL + SHIFT + I)
- 開啟 DevTools “Setting” -> “Experiments” 選項
- 點選 6 次
SHIFT顯示隱藏的選項 - 選中 “Performance Monitor” 選項
- 重啟 DevTools (快捷鍵 CMD/CTRL + SHIFT + I )
- 點選 “Esc” 開啟附加皮膚
- 選擇 “Performance monitor”
- 單擊啟用/禁用
- 開始使用效能監控吧 ?
這裡有很多不同的效能選項，大部分都是非常實用的並且我們在 Chrome 中用一些方法進行度量（例如時間軸，效能選項等）。
但是我想要分享一些新內容：
- “Layouts / sec” 和
- “Style recalcs / sec”
允許你實時的檢測你的 CSS 效能，例如：
感謝 csstriggers.com，我們知道，改變 CSS 的 top 和 left 屬性會觸發整個畫素渲染流程：繪製，佈局和組合。如果我們將這些屬性用於動畫，它將每秒觸發幾十次/上百次操作。
但是如果你使用 CSS 的 transform 屬性的 translateX/Y 來切換動畫，你將會發現，這並不會觸發繪製和佈局，僅僅會觸發組合這一階段，因為這是基於 GPU 的，會將你的 CPU 使用率降低為基本為 0%。
所有的這些都在 Paul Irish 的文章 為什麼使用 Translate() 移動元素優於 Top/left。為了測量差異，Paul 使用“時間軸”，展示了觸發繪製和佈局動作。但是近些年，Paul 正在致力於使用 Chrome DevTools 進行改良，這並不令人驚訝，我們終於有了一個合適的方法來衡量實時 CSS 效能。（我 fork 了他動畫切換的示例程式碼）
一般來說，Chrome 中的效能監視器有很多用途。現在，你可以獲得實時的應用程式效能資料啦。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。