前端开发者学堂 - fedev.cn

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

#译文#Animation#Web动画#performance#性能优化#性能
发布于 大漠

CSS动画性能非常好。虽然是简单的几个动画元素，如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂，网站的用户可能很快就会发现，并且有可能让用户觉得恶心。反而得不到相应的好评。

在这篇文章中，我将介绍浏览器开发者工具的一些有用的功能，这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样，当你的动画看起来有点卡（帧率图有点波涛汹涌），你会找到地应的方法知道为什么为会这样以及如何解决它。

调试CSS性能的开发者工具

你的动画需要达到60fps（每秒帧数），这样动画在浏览器中运行才会流畅，反之，帧率越低，你的动画就越糟糕。这也意味着浏览器没有超过16ms每帧的工作。但在这期间它做什么？你又是怎么知道你的浏览器是否跟上所需的帧率？

我认为评估一个动画的质量好坏没有什么比用户体验时的感觉要更好。然而，现代浏览器开发者工具也并不是完全100%的可靠，不过庆幸的是，浏览器开发者工具也越来越强大，它可以帮助你编辑和调试你自己的代码。

当你需要检查帧率和CSS动画表现时，浏览器开发者工具也是真实的。接下来介绍如何它们是如何工作的。

Firefox浏览器管理性能工具

在这篇文章中，我使用Firefox性能工具。另一个竞争对手Chrome也有类似的性能工具。你可以根据自己的习惯选择自己喜欢的。因为这两个浏览器都提供了强大的性能特性。

选择其中的一个操作打开Firefox开发者工具：

  • 在你的Web页面任何地方点击鼠标右键并选择菜单中的检查元素
  • 如果你喜欢操作键盘快捷键的话，在Window系统上可以同时按下Ctrl + Shift + l，在Linux或OS X系统中可以同时按下Cmd + Opt + l

接下来选择Performance选项。在这里，你会发现有一个按钮，可以让你开始记录你的网站的性能：

按下这个按钮，等待几秒钟或在页面上执行一些操作。当你完成了，点击停止记录性能按钮：

在这一瞬间Firefox帮你组织了良好的数据，这些数据将帮助你理解你的代码问题所在。

Firefox记录性能的面板看起来像下图这样：

Waterfall完美帮你检测CSS的transition和animation有关问题。其他部分是Call Tree和JS Flame Chart，你可以使用它来找出你的JavaScript代码中存在的瓶颈。

在Waterfall顶部有一个总结和详细的分析。在两者中，采用不同的颜色块来代表对应的数据：

  • 黄色（Yellow）块是JavaScript操作渲染
  • 紫色（Purple）块是指计算HTML元素的CSS样式（计算方式）和页面布局（布局）。浏览器对布局的操作是相当的昂贵的，所以如果你的动画属性包括重复布局（也称为回流，比如margin、padding、top和left等）的属性，结果需要重新计算
  • 绿色（Green）块是指重新绘制元素或者更多的位图（重绘）。动画中使用到比如color、background-color、box-shadow等属性就会涉及到重绘操作。这可能是让动画缓慢的原因，也将给用户糟糕的体验

你也可以过滤你想检查的数据类型。例如，我只对CSS的数据感兴趣，那么就可以通过单击在屏幕左上角的过滤器图标，选择你感兴趣的。

Waterfall下的大绿色块代表帧率上的信息。

看起来高表示是健康的，但最重要的是，他们是一致的，也就是说没有太多较深的差距。

让我们用一个示例来说明。

性能工具的实际操作

这里有一个简单的CSS动画，使用@keyframes做的一个动画，测试页面的效果看起来像这样：

紫色的矩形无限循环。

给div元素设置margin-left属性，还是通过动画来改变，@keyframes用的代码如下：

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

得到的动画性能数据看起来像这样：

帧率视觉图看起来有点参差不齐，动画的平均帧率为44.82fps，这有点低。

同时整个动画其间都在做布局和重绘动作。这些对于浏览器来说都是昂贵的，而且在浏览器中都是主线程执行，对性能产生负面影响。

最后，如果你访问检查器（Inspector）工具，点击动画（Animation）选项和把鼠标悬浮在动画名上面，将会有一个弹框出来，这个弹框将显示当前动画所有的信息。如果你的动画是优化的，会有一条消息说明事实。在这种情况下，没有信息：

现在，我要改变我的代码，在@keyframes中使用translate3d()这个属性来替代margin-left，并且让浏览器让录整个过程：

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

重新记录的性能面板看起来像下图：

现在帧率很高（56.83fps），而且Waterfall也没有昂贵的布局和重绘操作。

同样的，如果你打开浏览器开发工具中的检测（Inspector）选项，进入动画面板并且将鼠标悬浮在动画的名称上，你可以看到这样的信息：

弹出的信息框告诉你了所有的动画都是最优的，这对你的网站访客来说是个好消息。

动画只有CSS的opacity、transform和filter

你可能听说过这个建议，但也无防，这些建议值得我们再复习一遍：如果你想让你的动画能够顺利进行，动画只对CSS的opacity、transform和filter操作。如果对每个都进行动画，这对于你的浏览器而言压力是很大的，而且在很少的时间内执行这些任务也是昂贵的，这也通常产生一个不好的结果。

浏览器的性能工具再次证实，重排和重绘的操作并不是你的好朋友。

然而，每个浏览器处理CSS属性都有点不同。如果你想知道哪些CSS属性会触发浏览器重排和重绘操作，可以浏览CSS Triggers这个网站。特别是这些属性被用于你的动画中时，这些信息变得尤为重要。

为了确保高性能动画，一个流行的方法就是强迫浏览器改变一些属性的工作交给GPU来完成，使用浏览器的主线程的压力变得更小些。这个流行的方法就是利用硬件加速。可以通过CSS属性中的will-change、translateZ(0)或translate3d(0, 0, 0)这样的黑魔法开启硬件加速。这些技巧都可以正常工作，如果你避开使用这些技巧，会让你的动画变得更糟糕些。

这里我没有详细阐述硬件加速器对Web动画表现的细节，但如果你想深入的了解，可以阅读下面的一些相关资源：

本文根据@Maria Antonietta Perna的《Check CSS Animation Performance with the Browser’s Dev Tools》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/animation/check-css-animation-performance-with-the-browsers-dev-tools.htmlnike air max 2019 dress