Chrome DevTools - 性能監控

• 原文地址：Chrome DevTools- Performance monitor
• 原文做者：malyw
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Cherry
• 校對者：萌萌、noahziheng

Chrome DevTools - 性能監控

你是否常常須要 JavaScript 或者 CSS 進行優化，可是不能找到一個簡單的方式來衡量優化的效果？

固然，你可使用時間軸來記錄，可是在大多數狀況下，時間軸只記錄數據，並非實時更新的。在這點還有其餘的性能測量技巧，Chrome DevTools 添加了 「Performance Monitor（性能監控）」 選項卡，能夠體現實時性能：

這些都是在 Chrom 穩定版本中可用的而且能夠進行如下性能監控：

1. 打開 URL：「chrome://flags/#enable-devtools-experiments」
2. 將 「Developer Tools experiments」 選項設置爲「啓用」
3. 點擊 「Relaunch now」 來重啓 Chrome
4. 打開 Chrome DevTools (快捷鍵爲 CMD/CTRL + SHIFT + I)
5. 打開 DevTools 「Setting」 -> 「Experiments」 選項
6. 點擊 6 次 SHIFT 顯示隱藏的選項
7. 選中 「Performance Monitor」 選項
8. 重啓 DevTools (快捷鍵 CMD/CTRL + SHIFT + I )
9. 點擊 「Esc」 打開附加面板
10. 選擇 「Performance monitor」
11. 單擊啓用/禁用
12. 開始使用性能監控吧 😀

這裏有不少不一樣的性能選項，大部分都是很是實用的而且咱們在 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。