使用浏览器的开发者工具来检查 CSS 的动画性能

众所周知，CSS动画性能极好。 虽然这只是针对少量元素上的简单动画而言，如果你在编写动画代码时没有考虑性能以及增加更多的复杂性，网站用户很快就会注意到并且可能会因此生气。

在本文中，我将介绍一些有用的浏览器开发工具的功能，使您能够在使用CSS进行动画处理时知道究竟发生了什么。 这样一来，当一个动画看起来有点不连贯时，你就会有一个更好的关于为什么和怎么做的想法来解决它

在Firefox中探索性能工具

在本文中，我使用Firefox性能工具。 另一个有竞争力的性能工具是Chrome性能工具。 您可以根据喜好选择其中任意一款，因为这两款浏览器都提供了强大的性能特性。

要在Firefox中打开开发人员工具，请选择其中一个选项：

右键单击您的网页，然后在弹出的上下文菜单中选择“检查元素（Inspect Element ）”
如果您使用键盘，请在Windows和Linux系统上按下 Ctrl + Shift + I，在OS X系统上按下Cmd + Opt + I。

瀑布（Waterfall ）选项卡的顶部有一个摘要部分，并包含详细的说明。 在这两种情况下，数据都是彩色编码的：

黄色条指JavaScript操作
紫色条指计算HTML元素的CSS样式（重新计算样式）和页面布局（布局）。 布局操作对于浏览器执行来说相当昂贵，因此如果您对涉及重复布局（也称为页面重排（reflows），例如

margin

, 

padding

, 

top

, 

left

等）的属性进行动画处理，则结果可能响应缓慢。
绿色条指将您的元素绘制到一个或多个位图中（绘制）。  动画属性如

color

, 

background-color

, 

box-shadow

等涉及昂贵的绘制操作，这可能是动画缓慢和用户体验差的原因。





紫色矩形框在一个无限循环中移入并移出视图。

我通过为<div>元素添加margin-left动画属性来完成此操作，该div表示屏幕上的紫色矩形框。 以下是@keyframes动画块的内容：

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

我从这个动画得到的性能数据看起来像下面这样：



帧速率从视觉上看起来有些层次不齐，帧速率的平均值是44.82 fps，有点低。

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



现在，帧速率变高（56.83 fps），而且瀑布面板显示没有昂贵的布局和绘制操作。

此外，如果打开开发人员工具的“查看器”选项卡，请访问“动画”面板并将鼠标悬停在动画名称上，您可以看到如下：



与动画名称有关的信息框指出所有动画都被优化，这对您的网站访问者来说是个好消息。

只动画CSS Opacity, Transforms和Filters

你以前可能听说过这样的建议，但是为了以防万一，这一点值得我们再去考虑一遍：如果你想让动画运行流畅，那么只能动画CSS opacity, transforms和filters属性。 动画其他的一切属性将使你的浏览器承受在很短的时间内执行昂贵的任务的压力，这往往不会产生最好的结果。

我不会详细介绍网络动画性能的硬件加速，但如果您想深入挖掘，请查看下面列出的资源。

资源

高性能动画 作者Paul Lewis和Paul Irish
CSS动画和转换性能：深入浏览器内部 作者Max Vujovic
动画与性能 作者Paul Lewis和Sam Thorogood
坚持仅合成器的属性和管理层计数 作者Paul Lewis
GPU组合CSS的技巧 作者Sara Souiedan
CSS will-change属性简介 作者Nick Salloum
动画CSS属性 来自MDN