CSS优化:使用 DevTools 优化动画性能

10年服务1亿Tian开发工程师

CSS动画被认为是超高性能的。这种情况对于少数元素的简单动画来说是事实,如果您没有在考虑性能的情况下,对动画进行编码,会增加很多复杂性,网站用户很快就会注意到,可能会感到恼火。

在这篇文章中,我将介绍一些有用的浏览器开发者工具的功能,这些功能将能够帮助你在使用 CSS 执行动画时检查到底发生了什么。 这样,当一个动画效果看起来不太连贯时,你将会更好地了解为什么以及如何解决它。

CSS性能相关的开发者工具

你的动画至少需要达到60 fps(每秒帧数)才能在浏览器中流畅运行。 速率越低,动画效果越差。 这意味着浏览器在一帧内完成工作的时间不超过16毫秒。 但是在短的时间内到底发生了什么呢? 你怎么知道你的浏览器是否跟上了预期的帧率?

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

当您需要检查帧率和CSS动画性能时,也是如此。 来看看它是如何工作的。

Firefox的性能调试工具初探

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

要打开 Firefox 的开发者工具,需要以下几步:

  • 右键点击网页,选择菜单里的“Inspect Element(查看元素)”。
  • 如果你用键盘的话,Windows的快捷键是 Ctrl + Shift + I , Linux或者苹果OS X的快捷键是 Cmd + Opt + I

接下来,点击“Performance(性能)” 标签页。这有一个“开始记录性能”的按钮,用于记录网站性能。

Performance panel in Firefox Developer Tools.

点击开始记录,然后等几秒,或者在网页上做些什么。结束之后,点击“停止记录性能”按钮。

Stop recording browser activity in the Performance panel.

瞬间,Firefox会向你呈现大量组织良好的数据,帮助您了解代码中遇到的哪些问题。

性能记录的结果如下图所示:

Results of the recording in the Performance panel.

Waterfall(瀑布)部分非常适合检查和 CSS transition、关键帧动画相关的问题。另两个部分分别是“(Call Tree)调用树”和“(JS Flame Chart)JS火焰图”,您可以使用它来查找 JavaScript 代码中的瓶颈。

Waterfall(瀑布)顶部有一个摘要部分,并有详细的分类。在这两个数据都是有相应的颜色编码的:

  • 黄色条代表 JavaScript 操作。
  • 紫色条是指计算HTML元素的CSS样式(重新计算样式)以及页面布局(layout,布局)。 布局操作对于浏览器来说是开销相当高昂,所以如果你为牵涉重复布局(也称为reflows(回流) – 如marginpaddingtopleft,等等)的属性设置动画效果时,结果可能会很糟糕。
  • 绿色条是指将你的元素绘制成一个或多个位图(Paint)。涉及绘制操作的动画属性,如colorbackground-colorbox-shadow 等,会带来高昂的绘制开销,这可能是动画缓慢和用户体验不佳的原因。

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

Filter feature inside Firefox Performance Dev Tools.

瀑布摘要部分下方的绿色条代表帧率信息。

一个正常的页面,可能每秒帧数看起来很高,但更重要的是一致性,—— 即没有太多的起伏。

我们用下面这个例子加以说明。

性能检查工具

这是一个利用@keyframes关键字做出的的例子。测试页面是这样的:

Demo page with rectangular box visible.
Demo page with rectangular box about to slide out.

紫色的矩形会在视窗内做无限循环的滑入和滑出动画。

我通过设置这个div元素的margin-left来控制这个元素在视窗里位置。@keyframes关键帧的设置如下:

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

这段动画的性能分析图如下:

Recording of animating with margins in Firefox Performance panel of the developer tools.

帧率视图看起来有点锯齿,帧率平均为44.82 fps,有点低。

另外,请注意动画过程中发生的所有布局和绘画操作。这些是浏览器在主线程里的开销较大的操作,会对性能产生有负面影响。

最后,如果你访问 Inspector(检查器) 工具,点击动画部分,将鼠标悬停在动画名称上,会弹出一个信息框,显示所有关于当前动画的相关数据。如果你的动画经过优化,这里会有一条消息明确指示出来。本例的动画未经优化。

Animation panel inside the Inspector tool with info about the current animation.

现在,我对代码稍微做一些改动,然后重新记录浏览器使用 @keyframes 时针对CSS translate3d() 的属性操作。

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

下面是新代码的性能概况:

Recording of animation done using translate3d.

现在帧率更高(56.83 fps),瀑布图没有显示开销大的布局和绘制操作。

如果你打开“Inspector(查看器)”,查看“Animation(动画)”面板,然后鼠标悬停在动画名上,你会看到如下信息:

Animation panel in the Inspector of Firefox Developer Tools.

提示信息表明动画已经有所优化,对网站用户而言这是件好事。

仅只对CSS的 OpacityTransformsFilters 应用动画效果

也许你听过类似的建议,但以防万一,还是需要再重复一遍:如果你希望动画效果流畅,那么只利用opacity,transformsfilters这些属性做动画。没有限制的动画会让浏览器不堪重负,在很少的时间内执行开销很大的操作,最终并不能达到很好的效果。

就像开发者工具显示的这样,重新布局页面或者绘制元素都不是帮助我们的朋友。

然而, 不同浏览器处理CSS属性稍有不同。如果你希望知道哪些浏览器会针对哪些属性触发页面的布局、绘制事件(尤其是更新某些属性时,可能会涉及到动画的),请看。

为了保证高性能动画,常用的方法就是迫使浏览器把属性更新的任务交给GPU(图形处理器)去做,这样就通过利用硬件加速减轻了浏览器主线程的压力。你还可以使用这一CSS属性,或者translateZ(0)以及translate3d(0,0,0)的小技巧。上面的方法都行的通,但如果你过度使用也依然可能引起不可避免的性能问题,比如说动画卡顿。

这里我就不详细说明硬件加速对网页性能动画的影响了,如果你需要深入研究,下面是一些可用的参考资料。

资源

  • Paul Lewis 和 Paul Irish的。
  • Max Vujovic的
  • Paul Lewis 和 Sam Thorogood的。
  • Paul Lewis 的。
  • Sara Souiedan 的。
  • Nick Salloum的。
  • MDN的。

你在使用浏览器开发者工具检查动画性能这方面有什么经验?欢迎评论分享。

原文链接:

赞(0) 打赏
未经允许不得转载:WEBTian开发 » CSS优化:使用 DevTools 优化动画性能

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏