文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持那些成就SitePoint的合作伙伴。

来自作者的更多内容

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

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

第 1 段(可获 1.71 积分)

CSS性能开发工具

您的动画需要达到60 fps(每秒帧数)才能在浏览器中流畅运行 - 速率越低您的动画效果会越差。 这意味着浏览器处理每帧的工作时间不能超过16毫秒。 但是浏览器在那段时间里做了什么? 而您又如何知道浏览器是否符合所需的帧速率呢?

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

第 2 段(可获 1.54 积分)

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

在Firefox中探索性能工具

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

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

  • 右键单击您的网页,然后在弹出的上下文菜单中选择“检查元素(Inspect Element 
  • 如果您使用键盘,请在Windows和Linux系统上按下 Ctrl + Shift + I,在OS X系统上按下Cmd + Opt + I。
第 3 段(可获 1.23 积分)

接下来,点击“性能(Performance )”选项卡。 在这里,您会发现让您开始记录网站性能的按钮:

Performance panel in Firefox Developer Tools.

按下该按钮,等待几秒钟或在页面上执行一些操作。当操作完成后,单击停止录制性能(Stop Recording Performance)按钮:

Stop recording browser activity in the Performance panel.

在一秒钟之内,Firefox会为您提供大量精心组织的数据,帮助您了解您的代码遇到的问题。

性能(Performance )”面板内的记录结果如下所示:

Results of the recording in the Performance panel.

瀑布(Waterfall )部分非常适用于检查与CSS转换和关键帧动画有关的问题。 其他部分是调用树(Call Tree JS火焰图(JS Flame Chart),您可以使用它们来查找JavaScript代码中的瓶颈。

第 4 段(可获 1.59 积分)

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

  • 黄色条指JavaScript操作
  • 紫色条指计算HTML元素的CSS样式(重新计算样式)和页面布局(布局)。 布局操作对于浏览器执行来说相当昂贵,因此如果您对涉及重复布局(也称为页面重排(reflows),例如marginpaddingtopleft等)的属性进行动画处理,则结果可能响应缓慢。
  • 绿色条指将您的元素绘制到一个或多个位图中(绘制)。  动画属性如colorbackground-colorbox-shadow等涉及昂贵的绘制操作,这可能是动画缓慢和用户体验差的原因。
第 5 段(可获 1.33 积分)

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

Filter feature inside Firefox Performance Dev Tools.

瀑布摘要下面的大的绿色条表示有关帧速率的信息。

动画正常的表现是指绿色部分看起来相当高,但最重要的是一致性,即没有太多的深的间隙。

我们来举例说明一下。

运行中的性能工具

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

第 6 段(可获 1.23 积分)

Demo page with rectangular box visible.

Demo page with rectangular box about to slide out.

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

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

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

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

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

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

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

第 7 段(可获 1.33 积分)

最后,如果您访问“查看器(Inspector )”工具,请单击“动画(Animation )”部分并将鼠标悬停在动画名称上,将显示一个信息框,其中包含有关当前动画的所有相关数据。 如果你的动画被优化,那么会有一个消息对此进行说明。 在此例中,没有消息:

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);
  }
}

录制的性能如下所示:

第 8 段(可获 1.06 积分)

Recording of animation done using translate3d.

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

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

Animation panel in the Inspector of Firefox Developer Tools.

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

只动画CSS OpacityTransformsFilters

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

第 9 段(可获 1.74 积分)

经过浏览器中的性能工具的证实,重复布局和绘制操作并不是您的朋友。

但是,每个浏览器处理CSS属性的方式不尽相同。 如果您想确切知道哪些浏览器触发哪些属性的布局和绘制操作(特别是当更新这些涉及Web动画属性的值)时,请移步CSS触发器

为了保证高性能的动画,一种流行的方法是强制浏览器将某些属性交由GPU(图形处理单元)工作,这可以缓解浏览器的主线程的一些压力并利用硬件加速。 您可以通过使用will-change CSS属性,或者translateZ(0)translate3d(0,0,0)来实现。 所有这些技巧都会奏效,但是如果你过度使用的话,你会得到那些你想要避免的内容,即动画阻塞。

第 10 段(可获 1.8 积分)

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

资源

您在使用浏览器开发人员工具检查网站性能的经验是什么呢? 点击下面的评论框分享。

第 11 段(可获 1.45 积分)

文章评论