众所周知，CSS 动画具有超强的性能。虽然这是一个关于一些元素的简单动画，但如果你不考虑性能，并在编写动画时增加更多的复杂性，网站用户很快就会注意到它，并可能会感到愤怒。
在本文中，我介绍了一些有用的浏览器 DevTools 这些功能将允许您在使用中检查 CSS 底层在设置动画时发生了什么？这样，当动画看起来有点不稳定时，你就会更好地理解原因以及可以采取什么措施来修复它。
CSS 性能开发者工具
你的动画需要实现 60 fps(每秒帧数)可以在浏览器中顺利运行。速度越低，你的动画看起来就越差。这意味着只有大约只有浏览器 16 毫秒完成一帧工作。但是那段时间它做了什么呢？你怎么知道你的浏览器是否跟上了所需的帧率？
在评估动画质量时，没有什么比用户体验更好的了。然而，现代浏览器中的开发人员工具并不总是存在的 100% 它是可靠的，但它变得越来越智能，你可以使用它们来检查、编辑和调试你的代码。当您需要检查帧率和时 CSS 动画性能也是如此。这是它的工作原理。
探索 Firefox 中性能工具
我在这篇文章中使用它 Firefox Performance 工具。另一个大竞争对手是 Chrome Performance Tool。您可以选择您喜欢的，因为这两种浏览器都提供了强大的性能功能。
要在 Firefox 开发人员工具中打开，请选择以下选项之一：
- 右键单击您的网页，然后选择检查上下文菜单中的元素
- 如果您使用键盘，请使用Ctrl Shift I在 Windows 和 Linux 或Cmd Opt ImacOS 上按。
接下来，单击“性能”选项卡。在此，您将找到一个按钮，可以让您开始记录网站的性能：
按下按钮，等待几秒钟或在页面上执行一些操作。完成后，单击停止录制性能按钮：
瞬间，Firefox 它将为您提供大量组织良好的数据，这将帮助您理解您的代码遇到的问题。
Performance面板中的录制结果如下：
瀑布部分非常适合检查 CSS 与关键帧动画相关的过渡问题。其他部分是调用树和JS 你可以用它们来找到火焰图 JavaScript 代码中的瓶颈。
瀑布顶部有一个摘要和一个详细的细分。两者中，数据都是用颜色编码的:
- 黄色条表示 JavaScript 操作。
- 紫色条指的是计算 HTML 元素的 CSS 风格（重新计算风格）并布置您的页面（布局）。布局操作对浏览器来说非常昂贵，所以如果您设置动画（也称为回流-例如，以涉及重复布局的属性
margin、padding、top、left等-结果可能很糟糕。 - 绿色条是指将你的元素画成一张或多张位图 (Paint)。动画属性
color，如background-color、box-shadow、 等等，涉及到昂贵的绘画操作，这可能是动画缓慢和用户体验差的原因。
您还可以过滤要检查的数据类型。例如，我只对和 CSS 我对相关数据感兴趣，所以我可以单击屏幕左上角的过滤图标来取消所有其他内容：
瀑布摘要下方的大绿色条表示帧率信息。
健康的代表看起来很高，但最重要的是，它是一致的——也就是说，深度差距不大。
让我们用一个例子来解释这一点。
行动中的性能工具
这是一个使用关键字的简单CSS 动画@keyframes。测试页面如下所示：
矩形紫色框无限循环滑出视图。
我通过动画来表示屏幕上矩形框的元素margin-left完成此操作的属性。<div>这是@keyframes动画块的样子：
@keyframes slide-margin {
100% {
margin-left: 0;
}
}
本动画中获得的性能数据如下：
帧率的视觉效果看起来有点不均匀，帧率的平均值 44.82 fps，有点低。
此外，请注意动画中发生的所有布局和绘制操作。这些都是浏览器在主线程上执行的昂贵操作，会对性能产生负面影响。
最后，如果您访问检查器工具，单击动画部分并将鼠标悬挂在动画名称上，则弹出一个包含当前动画相关数据的信息框。如果你的动画被优化了，就会有消息解释这个事实。在这种情况下，没有消息：
现在，我将在浏览器中更改我的代码translate3d()使用此@keyframes块为 CSS 新记录属性设置动画时：
@keyframes slide-three-d {
100% {
transform: translate3d(0, 0, 0);
}
}
这是表演录音的样子：
现在帧速率更高了 (56.83 fps) 瀑布没有昂贵的布局和绘画操作。
此外，如果您打开开发人员工具的检查员选项卡，访问动画面板并将鼠标悬挂在动画名称上，您可以看到以下内容：
与动画名称相关的信息框指出，所有动画都已经优化，这对你的网站访问者来说是个好消息。
仅动画 CSS 不透明度、变换和过滤器
你以前可能听说过这个建议，但以防万一，值得再读一遍:如果你想让动画顺利运行，请只对 CSS 动画处理不透明度、变换和过滤器。为所有其他内容设置动画会给你的浏览器带来压力，需要在很短的时间内完成昂贵的任务，这通常不会产生最好的结果。
正如浏览器中的性能工具所确认的，重复的布局和绘画操作不是你的朋友。
然而，每个浏览器处理 CSS 属性的方式略有不同。如果您想知道哪个浏览器触发了哪些属性的布局和绘制操作（特别是当更新这些属性的值时，这是网络动画中涉及的内容），请转移 CSS触发器。
为了保证动画的性能，一种流行的做法是强迫浏览器将改变某些属性的工作交给GPU（图形处理单元），以减少浏览器主线程的一些压力，并使用硬件加速。您可以使用它will-changeCSS property或translateZ(0) 和translate3d(0,0,0)hack 这样做。所有这些技能都会起作用，但如果你过度使用它们，你实际上可能会得到你想要避免的东西，即卡顿动画。
