优化CSS：通过DevTools调整动画性能-css教程-PHP中文网

首页

web前端

css教程

优化CSS：通过DevTools调整动画性能

Lisa Kudrow

Feb 16, 2025 pm 12:10 PM

CSS动画性能优化指南：利用浏览器开发者工具提升动画流畅度

Optimizing CSS: Tweaking Animation Performance with DevTools

本文与SiteGround合作创作。感谢支持SitePoint的合作伙伴们。

众所周知，CSS动画性能通常很高。然而，对于包含大量元素或复杂动画的场景，如果代码没有针对性能进行优化，则会导致动画卡顿，影响用户体验。

本文将介绍一些实用的浏览器开发者工具功能，帮助您检查CSS动画背后的运行机制。当动画出现卡顿时，您可以更好地了解原因并进行修复。

关键要点

利用浏览器开发者工具优化CSS动画性能，识别导致动画卡顿的问题，并深入了解动画的底层运行情况。这些工具可以检查帧率、审查、编辑和调试代码，以及分析可能影响性能的布局和绘制操作。
为了获得流畅的动画效果，目标帧率应达到60fps（每秒帧数）。为了确保动画更流畅，只对CSS的不透明度（opacity）、变换（transforms）和滤镜（filters）进行动画效果设置。动画化其他属性可能会给浏览器带来压力，迫使其在极短时间内执行代价高昂的任务，从而导致糟糕的结果。
使用will-change CSS属性，或translateZ(0)和translate3d(0,0,0)技巧来强制浏览器将某些属性更改的工作交给GPU（图形处理单元）处理。这利用了硬件加速，并减轻了浏览器主线程的部分压力。但是，过度使用可能会导致您试图避免的问题，例如动画卡顿。

开发者工具与CSS性能分析

您的动画需要达到60fps才能在浏览器中流畅运行。帧率越低，动画效果越差。这意味着浏览器每帧最多只有大约16毫秒的时间来完成其工作。但在这段时间内它做了什么？你如何知道你的浏览器是否跟上了所需的帧率？

我认为，在评估动画质量时，没有什么比用户体验更重要的了。然而，现代浏览器的开发者工具虽然并不总是100%可靠，但它们变得越来越智能，您可以使用它们来审查、编辑和调试代码。

当您需要检查帧率和CSS动画性能时，情况也是如此。以下是它的工作原理。

Firefox性能工具探索

在本文中，我使用的是Firefox性能工具。另一个主要的竞争者是Chrome性能工具。您可以选择您最喜欢的工具，因为这两个浏览器都提供了强大的性能功能。

要在Firefox中打开开发者工具，请选择以下选项之一：

右键单击您的网页，然后在上下文菜单中选择“检查元素”。
或者使用键盘快捷键：在Windows和Linux上按Ctrl Shift I，在macOS上按Cmd Opt I。

接下来，单击“性能”选项卡。在这里，您会找到一个按钮，可以让您开始录制网站的性能数据：

Optimizing CSS: Tweaking Animation Performance with DevTools 按下该按钮并等待几秒钟，或者在页面上执行某些操作。完成后，单击“停止性能录制”按钮：

Optimizing CSS: Tweaking Animation Performance with DevTools 瞬间，Firefox就会向您呈现大量组织良好的数据，帮助您了解代码中存在哪些问题。

“性能”面板中的录制结果如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools “瀑布流”部分非常适合检查与CSS过渡和关键帧动画相关的问题。其他部分是“调用树”和“JS火焰图”，您可以使用它们来找出JavaScript代码中的瓶颈。

瀑布流视图顶部有一个摘要部分和一个详细的细分。在这两者中，数据都是用颜色编码的：

黄色条表示JavaScript操作。
紫色条表示计算HTML元素的CSS样式（重新计算样式）和页面布局（布局）。布局操作对于浏览器来说代价相当高昂，因此，如果您动画化涉及重复布局（也称为“回流”——例如margin、padding、top、left等）的属性，则结果可能会卡顿。
绿色条表示将元素绘制到一个或多个位图中（绘制）。动画化诸如color、background-color、box-shadow等属性会涉及代价高昂的绘制操作，这可能是动画迟缓和用户体验不佳的原因。

您还可以筛选要检查的数据类型。例如，我只对CSS相关数据感兴趣，因此我可以通过单击屏幕左上角的筛选图标来取消选择其他所有内容：

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

健康的表示应该看起来相当高，但最重要的是一致——也就是说，没有太多深的间隙。

让我们用一个例子来说明这一点。

性能工具实战

这是一个使用@keyframes关键字的简单CSS动画。测试页面如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools 矩形紫色框以无限循环的方式滑入和滑出视野。

我通过动画化表示屏幕上矩形框的<div>元素的<code>margin-left属性来实现这一点。@keyframes动画块如下所示：

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

我从这个动画中获得的性能数据如下所示：

Optimizing CSS: Tweaking Animation Performance with DevTools 帧率可视化看起来有点参差不齐，平均帧率为44.82fps，有点低。

此外，请注意在动画过程中发生的所有布局和绘制操作。这些是浏览器在其主线程上执行的代价高昂的操作，这对性能有负面影响。

最后，如果您访问“检查器”工具，单击“动画”部分，然后将鼠标悬停在动画名称上，则会弹出一个信息框，其中包含有关当前动画的所有相关数据。如果您的动画经过优化，则会显示一条说明该事实的消息。在本例中，没有消息：

Optimizing CSS: Tweaking Animation Performance with DevTools 现在，我将更改我的代码并进行新的录制，因为浏览器使用此@keyframes块动画化CSStranslate3d()属性：

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

这是性能录制的图像：

Optimizing CSS: Tweaking Animation Performance with DevTools 现在帧率更高（56.83fps），瀑布流没有显示代价高昂的布局和绘制操作。

此外，如果您打开开发者工具的“检查器”选项卡，访问“动画”面板并将鼠标悬停在动画名称上，您会看到类似这样的内容：

Optimizing CSS: Tweaking Animation Performance with DevTools 与动画名称相关的Info框指出所有动画都已优化，这对您的网站访问者来说是个好消息。

仅动画化CSS的`opacity`、`transforms`和`filters`

您可能以前听过这条建议，但以防万一，还是值得再讲一遍：如果您希望动画流畅运行，则只对CSS的不透明度（opacity）、变换（transforms）和滤镜（filters）进行动画效果设置。动画化其他所有内容都会给浏览器带来压力，迫使其在极短时间内执行代价高昂的任务，这通常不会产生最佳结果。

正如浏览器中的性能工具所证实的那样，重复的布局和绘制操作并非您的朋友。

但是，每个浏览器处理CSS属性的方式略有不同。如果您想知道哪个浏览器会为哪些属性触发布局和绘制操作（尤其是在更新这些属性的值时，这是Web动画中涉及的操作），请访问CSS Triggers。

为了确保动画性能，一种流行的方法是强制浏览器将某些属性更改的工作交给GPU（图形处理单元），这减轻了浏览器主线程的部分压力，并利用了硬件加速。您可以使用will-change CSS属性，或translateZ(0)和translate3d(0,0,0)技巧来实现。所有这些技巧都有效，但如果您过度使用，您实际上可能会得到您试图避免的结果，即动画卡顿。

我不打算详细介绍Web动画性能的硬件加速，但如果您想深入了解，请查看下面列出的资源。

资源

关于CSS动画性能的常见问题解答 (FAQs)

影响CSS动画性能的关键因素有哪些？

CSS动画的性能受多种因素影响。动画的复杂性、正在动画化的元素数量以及正在动画化的属性都会发挥作用。动画化诸如transform和opacity之类的属性往往性能更好，因为它们不会触发布局或绘制操作。但是，动画化诸如width、height或margin之类的属性可能会导致布局偏移和重绘，从而减慢动画速度。此外，设备的硬件和浏览器的渲染引擎也会影响CSS动画的性能。