使用瀏覽器開發者工具檢查CSS動畫性能

MarJarrett 7年前發布 | 39K 次閱讀 CSS 前端技術

本文是我們和 SiteGround 一起合作的系列之一。感謝我們的合作伙伴，有了你們，SitePoint才成為可能。

CSS動畫的性能可以非常好。雖然對簡單動畫和少部分元素來說這是事實，但是如果你不注意編寫高性能的動畫代碼，額外增加了很多復雜性，網站用戶很快就會注意到（動畫性能很差），并產生厭惡。

本文里，我會介紹一些有用的開發者工具，來幫助我們調試，理解CSS動畫背后的機制。通過這些方法，當一個動畫效果看起來不太連貫時，你就能更好的理解其原因并找到修改辦法。

CSS性能相關的開發者工具

你的動畫需要至少60FPS（每秒幀數）才能在瀏覽器里看起來比較連貫，幀數越低，動畫效果越差。也就是說，如果瀏覽器完成每幀內容的刷新工作最多不超過16毫秒。它在這么短的時間里做了什么？如何知道瀏覽器是否能夠跟上需要刷新的幀數？

我認為，在動畫質量這件事上，沒有什么可以比它的性能更能影響用戶體驗的了。然而，現代瀏覽器里的開發者工具，盡管不是100%可靠，但還是越來越智能，提供了更多功能供我們檢查、編輯或者調試代碼。

當需要調試幀數或者CSS的動畫性能的時候，你也會發現這一點。來看看它是怎樣工作的。

Firefox的性能調試工具初探

本文我會用Firefox的性能工具。另一個有力的競爭者是Chrome開發者工具。你可以挑一個你喜歡的，兩者都提供了非常強大的功能。

要打開Firefox的開發者工具，需要以下幾步：

  • 右鍵點擊網頁，選擇菜單里的“ 查看元素 ”。

  • 如果你用鍵盤的話，Windows的快捷鍵是Ctrl + Shift + I， Linux或者蘋果OS X的快捷鍵是Cmd + Opt + I。

接下來，點擊“ 性能 ”標簽頁。這有一個“ 開始記錄性能 ”的按鈕，用于記錄網站性能。

點擊開始記錄，然后等幾秒，或者在網頁上做些什么。結束之后，點擊“ 停止記錄性能 ”按鈕。

稍等幾秒，Firefox就會顯示出很多組織好的數據，這些數據可以幫助你理解代碼中的瓶頸。

性能記錄的結果如下圖所示：

瀑布 部分來檢查和CSS的transition、關鍵幀動畫相關的問題的最適合不過。另兩個部分分別是“ 調用樹 ”和“ JS火焰圖 ”，你可以在這里找到JS代碼的性能瓶頸。

瀑布頁在頂部有一個全局的摘要部分，之下是具體的細分內容。在這兩塊里，數據都是紅色的。

  • 黃色柱狀圖代表JavaScript操作。

  • 紫色柱狀圖代表計算HTML元素的CSS樣式（或者重新計算樣式）以及頁面布局。布局操作對瀏覽器而言非常耗時，如果你的動畫屬性涉及到重復的布局（例如 margin ， padding ， top ， left ，等等），結果可能非常不好。

  • 綠色柱狀圖代表把頁面元素繪制到比特圖中去。動畫屬性例如 color ， background-color ， box-shadow ，等等，可能會增加高昂開銷的操作，有可能導致動畫粘滯，帶來不好的用戶體驗。

你可以選擇需要檢查的數據類型。例如，我就只看CSS相關的數據，因此可以點擊左上角的漏斗圖標取消選擇其他的數據類型。

瀑布摘要部分下方的綠色柱狀圖代表頁面的每秒幀數。

一個正常的頁面，可能每秒幀數看起來很高，但更重要的是一致性，也就是說，每秒幀數不能有較大的跌宕起伏。

讓我們用下面這個例子加以說明。

性能檢查工具

這是一個利用 @keyframes 關鍵字做出的 CSS動畫 的例子。測試頁面是這樣的：

紫色的矩形會在視窗內進出，做無限循環。

我通過設置這個 div 元素的 margin-left 來控制這個元素在視窗里位置。 @keyframes 關鍵幀的設置如下：

@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}

這段動畫的性能分析圖如下：

每秒幀數看上去有些參差不齊，平均值大概是44.82秒，略低。

另外，還需要注意到布局和繪制操作在整個動畫過程中占據的部分。這些是瀏覽器在主線程里的開銷較大的操作，會對整體的性能產生一些負面影響。

最后，如果你點擊“ 查看器 ”，點擊“ 動畫 ”標簽，鼠標懸停在動畫名稱上時，就會看到彈出框里顯示當前動畫的相關參數。如果你的動畫經過優化，這里會有一條消息明確指示出來。本例的動畫未經優化。

現在，我對代碼稍微做一些改動，然后重新記錄瀏覽器使用 @keyframes 時針對 translate3d() 的屬性操作。

@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}

下面是新代碼的性能概況：

這次每秒幀數高了一點，56.83fps，瀑布圖里并沒有看到開銷大的布局和繪制操作。

如果你打開“ 查看器 ”，查看“ 動畫 ”面板，然后鼠標懸停在動畫名上，你會看到如下信息：

提示信息表明動畫已經有所優化，對網站用戶而言這是件好事。

僅使用CSS的 Opacity ， Transforms 和 Filters 用于動畫效果

也許你聽過類似的建議，但以防萬一，還是需要再重復一遍：如果你希望動畫效果流暢，那么只利用 opacity , transforms ， filters 這些屬性做動畫。沒有限制的動畫會讓瀏覽器不堪重負，在很少的時間內執行開銷很大的操作，最終并不能達到很好的效果。

就像開發者工具顯示的這樣，重新布局頁面或者繪制元素都不是幫助我們的朋友。

然而， 不同瀏覽器處理CSS屬性稍有不同。如果你希望知道哪些瀏覽器會針對哪些屬性觸發頁面的布局、繪制事件（尤其是更新某些屬性時，可能會涉及到動畫的），請看 CSS Triggers 。

為了保證高性能動畫，常用的方法就是迫使瀏覽器把屬性更新的任務交給GPU（圖形處理器）去做，這樣就通過利用硬件加速減輕了瀏覽器主線程的壓力。你還可以使用 will-change 這一CSS屬性，或者 translateZ(0) 以及 translate3d(0,0,0) 的小技巧。上面的方法都行的通，但如果你過度使用也依然可能引起不可避免的性能問題，比如說動畫卡頓。

這里我就不詳細說明硬件加速對網頁性能動畫的影響了，如果你需要深入研究，下面是一些可用的參考資料。

資源

 

來自：http://www.zcfy.cc/article/check-css-animation-performance-with-the-browser-039-s-dev-tools-mdash-sitepoint-3146.html

 

 本文由用戶 MarJarrett 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！