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

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

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

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

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

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

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

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

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

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

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

• 如果你用鍵盤(pán)的話，Windows的快捷鍵是Ctrl + Shift + I， Linux或者蘋(píng)果OS X的快捷鍵是Cmd + Opt + I。

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

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

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

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

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

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

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

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

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

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

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

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

讓我們用下面這個(gè)例子加以說(shuō)明。

性能檢查工具

這是一個(gè)利用 @keyframes 關(guān)鍵字做出的 CSS動(dòng)畫(huà) 的例子。測(cè)試頁(yè)面是這樣的：

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

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

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

這段動(dòng)畫(huà)的性能分析圖如下：

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

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

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

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

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

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

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

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

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

僅使用CSS的 Opacity ， Transforms 和 Filters 用于動(dòng)畫(huà)效果

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

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

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

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

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

資源

• 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 。

 

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

 

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

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