大家好，很久沒給大家更新文章，今天給大家分享一些CSS優化，也希望本文對正在學習web前端的小夥伴學習有所幫助。

CSS動畫被認為是超高性能的。這種情況對於少數元素的簡單動畫來說是事實，如果您沒有在考慮性能的情況下，對動畫進行編碼，會增加很多複雜性，網站用戶很快就會注意到，可能會感到惱火。

我將介紹一些有用的瀏覽器開發者工具的功能，這些功能將能夠幫助你在使用 CSS 執行動畫時檢查到底發生了什麼。 這樣，當一個動畫效果看起來不太連貫時，你將會更好地瞭解為什麼以及如何解決它。

CSS性能相關的開發者工具

你的動畫至少需要達到60 fps（每秒幀數）才能在瀏覽器中流暢運行。 速率越低，動畫效果越差。 這意味著瀏覽器在一幀內完成工作的時間不超過16毫秒。 但是在短的時間內到底發生了什麼呢？ 你怎麼知道你的瀏覽器是否跟上了預期的幀率？

在評估動畫的質量時，我認為沒有什麼能比用戶體驗更好。但是，現代瀏覽器中的開發者工具，雖然並不總是100％可靠，但已變得越來越智能，而且你可以使用它們來查看，編輯和調試您的代碼。

當您需要檢查幀率和CSS動畫性能時，也是如此。 來看看它是如何工作的。

Firefox的性能調試工具初探

在本文中，我使用 Firefox 性能工具。另一個重要的競爭者是 Chrome 性能工具。你可以選擇你最喜歡的，因為這兩個瀏覽器提供強大的性能功能。

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

右鍵點擊網頁，選擇菜單裡的“Inspect Element(查看元素)”。

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

Waterfall(瀑布)部分非常適合檢查和 CSS transition、關鍵幀動畫相關的問題。另兩個部分分別是“(Call Tree)調用樹”和“(JS Flame Chart)JS火焰圖”，您可以使用它來查找 JavaScript 代碼中的瓶頸。

Waterfall(瀑布)頂部有一個摘要部分，並有詳細的分類。在這兩個數據都是有相應的顏色編碼的：

黃色條代表 JavaScript 操作。

紫色條是指計算HTML元素的CSS樣式（重新計算樣式）以及頁面佈局（layout，佈局）。 佈局操作對於瀏覽器來說是開銷相當高昂，所以如果你為牽涉重複佈局（也稱為reflows(迴流) – 如margin，padding，top，left，等等）的屬性設置動畫效果時，結果可能會很糟糕。

綠色條是指將你的元素繪製成一個或多個位圖（Paint）。涉及繪製操作的動畫屬性，如color，background-color，box-shadow 等，會帶來高昂的繪製開銷，這可能是動畫緩慢和用戶體驗不佳的原因。

瀑布摘要部分下方的綠色條代表幀率信息。

一個正常的頁面，可能每秒幀數看起來很高，但更重要的是一致性，—— 即沒有太多的起伏。

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

性能檢查工具

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

紫色的矩形會在視窗內做無限循環的滑入和滑出動畫。

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

幀率視圖看起來有點鋸齒，幀率平均為44.82 fps，有點低。

另外，請注意動畫過程中發生的所有佈局和繪畫操作。這些是瀏覽器在主線程裡的開銷較大的操作，會對性能產生有負面影響。

最後，如果你訪問 Inspector(檢查器) 工具，點擊動畫部分，將鼠標懸停在動畫名稱上，會彈出一個信息框，顯示所有關於當前動畫的相關數據。如果你的動畫經過優化，這裡會有一條消息明確指示出來。本例的動畫未經優化。

現在幀率更高（56.83 fps），瀑布圖沒有顯示開銷大的佈局和繪製操作。

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

僅只對CSS的 Opacity，Transforms 和 Filters 應用動畫效果

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

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

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

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

好了，今天內容就分享到這裡，也歡迎你可以在下面一起學習交流，共同成長！！

閱讀更多 易學前端筆記 的文章

關鍵字: 編程語言 JavaScript 大家