厨房玩弄丝袜人妻系列国产电影,成人性生交大片免费

利用瀏覽器開發(fā)者工具優(yōu)化CSS動畫性能，識別導致動畫卡頓的問題，并深入了解動畫的底層運行情況。這些工具可以檢查幀率、審查、編輯和調試代碼，以及分析可能影響性能的布局和繪制操作。
為了獲得流暢的動畫效果，目標幀率應達到60fps（每秒幀數(shù)）。為了確保動畫更流暢，只對CSS的不透明度（opacity）、變換（transforms）和濾鏡（filters）進行動畫效果設置。動畫化其他屬性可能會給瀏覽器帶來壓力，迫使其在極短時間內執(zhí)行代價高昂的任務，從而導致糟糕的結果。
使用will-change CSS屬性，或translateZ(0)和translate3d(0,0,0)技巧來強制瀏覽器將某些屬性更改的工作交給GPU（圖形處理單元）處理。這利用了硬件加速，并減輕了瀏覽器主線程的部分壓力。但是，過度使用可能會導致您試圖避免的問題，例如動畫卡頓。

開發(fā)者工具與CSS性能分析

您的動畫需要達到60fps才能在瀏覽器中流暢運行。幀率越低，動畫效果越差。這意味著瀏覽器每幀最多只有大約16毫秒的時間來完成其工作。但在這段時間內它做了什么？你如何知道你的瀏覽器是否跟上了所需的幀率？

我認為，在評估動畫質量時，沒有什么比用戶體驗更重要的了。然而，現(xiàn)代瀏覽器的開發(fā)者工具雖然并不總是100%可靠，但它們變得越來越智能，您可以使用它們來審查、編輯和調試代碼。

當您需要檢查幀率和CSS動畫性能時，情況也是如此。以下是它的工作原理。

Firefox性能工具探索

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

要在Firefox中打開開發(fā)者工具，請選擇以下選項之一：

右鍵單擊您的網(wǎng)頁，然后在上下文菜單中選擇“檢查元素”。
或者使用鍵盤快捷鍵：在Windows和Linux上按Ctrl Shift I，在macOS上按Cmd Opt I。

接下來，單擊“性能”選項卡。在這里，您會找到一個按鈕，可以讓您開始錄制網(wǎng)站的性能數(shù)據(jù)：

Optimizing CSS: Tweaking Animation Performance with DevTools 按下該按鈕并等待幾秒鐘，或者在頁面上執(zhí)行某些操作。完成后，單擊“停止性能錄制”按鈕：

Optimizing CSS: Tweaking Animation Performance with DevTools 瞬間，F(xiàn)irefox就會向您呈現(xiàn)大量組織良好的數(shù)據(jù)，幫助您了解代碼中存在哪些問題。

“性能”面板中的錄制結果如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools “瀑布流”部分非常適合檢查與CSS過渡和關鍵幀動畫相關的問題。其他部分是“調用樹”和“JS火焰圖”，您可以使用它們來找出JavaScript代碼中的瓶頸。

瀑布流視圖頂部有一個摘要部分和一個詳細的細分。在這兩者中，數(shù)據(jù)都是用顏色編碼的：

黃色條表示JavaScript操作。
紫色條表示計算HTML元素的CSS樣式（重新計算樣式）和頁面布局（布局）。布局操作對于瀏覽器來說代價相當高昂，因此，如果您動畫化涉及重復布局（也稱為“回流”——例如margin、padding、top、left等）的屬性，則結果可能會卡頓。
綠色條表示將元素繪制到一個或多個位圖中（繪制）。動畫化諸如color、background-color、box-shadow等屬性會涉及代價高昂的繪制操作，這可能是動畫遲緩和用戶體驗不佳的原因。

您還可以篩選要檢查的數(shù)據(jù)類型。例如，我只對CSS相關數(shù)據(jù)感興趣，因此我可以通過單擊屏幕左上角的篩選圖標來取消選擇其他所有內容：

Optimizing CSS: Tweaking Animation Performance with DevTools 瀑布流摘要下方的綠色大條表示幀率信息。

健康的表示應該看起來相當高，但最重要的是一致——也就是說，沒有太多深的間隙。

讓我們用一個例子來說明這一點。

性能工具實戰(zhàn)

這是一個使用@keyframes關鍵字的簡單CSS動畫。測試頁面如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools 矩形紫色框以無限循環(huán)的方式滑入和滑出視野。

我通過動畫化表示屏幕上矩形框的<div>元素的<code>margin-left屬性來實現(xiàn)這一點。@keyframes動畫塊如下所示：

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

我從這個動畫中獲得的性能數(shù)據(jù)如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools 幀率可視化看起來有點參差不齊，平均幀率為44.82fps，有點低。

此外，請注意在動畫過程中發(fā)生的所有布局和繪制操作。這些是瀏覽器在其主線程上執(zhí)行的代價高昂的操作，這對性能有負面影響。

最后，如果您訪問“檢查器”工具，單擊“動畫”部分，然后將鼠標懸停在動畫名稱上，則會彈出一個信息框，其中包含有關當前動畫的所有相關數(shù)據(jù)。如果您的動畫經過優(yōu)化，則會顯示一條說明該事實的消息。在本例中，沒有消息：

Optimizing CSS: Tweaking Animation Performance with DevTools 現(xiàn)在，我將更改我的代碼并進行新的錄制，因為瀏覽器使用此@keyframes塊動畫化CSStranslate3d()屬性：

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

這是性能錄制的圖像：

Optimizing CSS: Tweaking Animation Performance with DevTools 現(xiàn)在幀率更高（56.83fps），瀑布流沒有顯示代價高昂的布局和繪制操作。

此外，如果您打開開發(fā)者工具的“檢查器”選項卡，訪問“動畫”面板并將鼠標懸停在動畫名稱上，您會看到類似這樣的內容：

Optimizing CSS: Tweaking Animation Performance with DevTools 與動畫名稱相關的Info框指出所有動畫都已優(yōu)化，這對您的網(wǎng)站訪問者來說是個好消息。

僅動畫化CSS的`opacity`、`transforms`和`filters`

您可能以前聽過這條建議，但以防萬一，還是值得再講一遍：如果您希望動畫流暢運行，則只對CSS的不透明度（opacity）、變換（transforms）和濾鏡（filters）進行動畫效果設置。動畫化其他所有內容都會給瀏覽器帶來壓力，迫使其在極短時間內執(zhí)行代價高昂的任務，這通常不會產生最佳結果。

正如瀏覽器中的性能工具所證實的那樣，重復的布局和繪制操作并非您的朋友。

但是，每個瀏覽器處理CSS屬性的方式略有不同。如果您想知道哪個瀏覽器會為哪些屬性觸發(fā)布局和繪制操作（尤其是在更新這些屬性的值時，這是Web動畫中涉及的操作），請訪問CSS Triggers。

為了確保動畫性能，一種流行的方法是強制瀏覽器將某些屬性更改的工作交給GPU（圖形處理單元），這減輕了瀏覽器主線程的部分壓力，并利用了硬件加速。您可以使用will-change CSS屬性，或translateZ(0)和translate3d(0,0,0)技巧來實現(xiàn)。所有這些技巧都有效，但如果您過度使用，您實際上可能會得到您試圖避免的結果，即動畫卡頓。

我不打算詳細介紹Web動畫性能的硬件加速，但如果您想深入了解，請查看下面列出的資源。

資源

關于CSS動畫性能的常見問題解答 (FAQs)

影響CSS動畫性能的關鍵因素有哪些？

CSS動畫的性能受多種因素影響。動畫的復雜性、正在動畫化的元素數(shù)量以及正在動畫化的屬性都會發(fā)揮作用。動畫化諸如transform和opacity之類的屬性往往性能更好，因為它們不會觸發(fā)布局或繪制操作。但是，動畫化諸如width、height或margin之類的屬性可能會導致布局偏移和重繪，從而減慢動畫速度。此外，設備的硬件和瀏覽器的渲染引擎也會影響CSS動畫的性能。

如何衡量CSS動畫的性能？

您可以使用瀏覽器開發(fā)者工具來衡量CSS動畫的性能。例如，在Chrome中，您可以使用“性能”選項卡來記錄和分析動畫的運行時間。此工具提供了動畫生命周期中時間消耗的詳細細分，幫助您識別任何性能瓶頸。

流暢CSS動畫的理想幀率是多少？

流暢動畫的理想幀率是每秒60幀（fps）。這是因為大多數(shù)設備每秒刷新屏幕60次。因此，為了創(chuàng)建流暢的動畫，您應該目標每16.67毫秒（1秒/60）更新一次動畫，這對應于60fps。

如何優(yōu)化CSS動畫以獲得更好的性能？

有多種策略可以優(yōu)化CSS動畫以獲得更好的性能。一種常見的方法是動畫化不會觸發(fā)布局或繪制操作的屬性，例如transform和opacity。此外，減少正在動畫化的元素數(shù)量和簡化動畫也可以提高性能。使用will-change屬性還可以幫助瀏覽器通過提示可能要動畫化的屬性來優(yōu)化動畫。