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

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

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

CSS性能相關(guān)的開發(fā)者工具

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

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

當(dāng)需要調(diào)試幀數(shù)或者CSS的動畫性能的時候，你也會發(fā)現(xiàn)這一點(diǎn)。來看看它是怎樣工作的。

Firefox的性能調(diào)試工具初探

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

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

• 右鍵點(diǎn)擊網(wǎng)頁，選擇菜單里的“ 查看元素 ”。

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

接下來，點(diǎn)擊“ 性能 ”標(biāo)簽頁。這有一個“ 開始記錄性能 ”的按鈕，用于記錄網(wǎng)站性能。

點(diǎn)擊開始記錄，然后等幾秒，或者在網(wǎng)頁上做些什么。結(jié)束之后，點(diǎn)擊“ 停止記錄性能 ”按鈕。

稍等幾秒，F(xiàn)irefox就會顯示出很多組織好的數(shù)據(jù)，這些數(shù)據(jù)可以幫助你理解代碼中的瓶頸。

性能記錄的結(jié)果如下圖所示：

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

瀑布頁在頂部有一個全局的摘要部分，之下是具體的細(xì)分內(nèi)容。在這兩塊里，數(shù)據(jù)都是紅色的。

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

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

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

你可以選擇需要檢查的數(shù)據(jù)類型。例如，我就只看CSS相關(guān)的數(shù)據(jù)，因此可以點(diǎn)擊左上角的漏斗圖標(biāo)取消選擇其他的數(shù)據(jù)類型。

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

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

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

性能檢查工具

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

紫色的矩形會在視窗內(nèi)進(jìn)出，做無限循環(huán)。

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

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

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

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

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

最后，如果你點(diǎn)擊“ 查看器 ”，點(diǎn)擊“ 動畫 ”標(biāo)簽，鼠標(biāo)懸停在動畫名稱上時，就會看到彈出框里顯示當(dāng)前動畫的相關(guān)參數(shù)。如果你的動畫經(jīng)過優(yōu)化，這里會有一條消息明確指示出來。本例的動畫未經(jīng)優(yōu)化。

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

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

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

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

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

提示信息表明動畫已經(jīng)有所優(yōu)化，對網(wǎng)站用戶而言這是件好事。

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

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

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

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

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

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

資源

• Paul Lewis 和 Paul Irish的 High Performance Animations 。

• Max Vujovic的 CSS animations and transitions performance: looking inside the browser

• Paul Lewis 和 Sam Thorogood的 Animations and Performance 。

• Paul Lewis 的 Stick to Compositor-Only Properties and Manage Layer Count 。

• Sara Souiedan 的 Tricks for GPU Composited CSS 。

• Nick Salloum的 An Introduction to the CSS will-change Property 。

• MDN的 Animating CSS properties 。

 

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

 

標(biāo)簽： linux 代碼 開發(fā)者

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。