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

MarJarrett 2年前
   <p style="text-align:center"><img src="https://simg.open-open.com/show/f881542a1297c9475a43a0f19e26c9b4.jpg"></p>    <p>本文是我们和 <a href="/misc/goto?guid=4959750069835407780" rel="nofollow,noindex">SiteGround</a> 一起合作的系列之一。感谢我们的合作伙伴,有了你们,SitePoint才成为可能。</p>    <p>CSS动画的性能可以非常好。虽然对简单动画和少部分元素来说这是事实,但是如果你不注意编写高性能的动画代码,额外增加了很多复杂性,网站用户很快就会注意到(动画性能很差),并产生厌恶。</p>    <p>本文里,我会介绍一些有用的开发者工具,来帮助我们调试,理解CSS动画背后的机制。通过这些方法,当一个动画效果看起来不太连贯时,你就能更好的理解其原因并找到修改办法。</p>    <h2>CSS性能相关的开发者工具</h2>    <p>你的动画需要至少60FPS(每秒帧数)才能在浏览器里看起来比较连贯,帧数越低,动画效果越差。也就是说,如果浏览器完成每帧内容的刷新工作最多不超过16毫秒。它在这么短的时间里做了什么?如何知道浏览器是否能够跟上需要刷新的帧数?</p>    <p>我认为,在动画质量这件事上,没有什么可以比它的性能更能影响用户体验的了。然而,现代浏览器里的开发者工具,尽管不是100%可靠,但还是越来越智能,提供了更多功能供我们检查、编辑或者调试代码。</p>    <p>当需要调试帧数或者CSS的动画性能的时候,你也会发现这一点。来看看它是怎样工作的。</p>    <h2>Firefox的性能调试工具初探</h2>    <p>本文我会用Firefox的性能工具。另一个有力的竞争者是Chrome开发者工具。你可以挑一个你喜欢的,两者都提供了非常强大的功能。</p>    <p>要打开Firefox的开发者工具,需要以下几步:</p>    <ul>     <li> <p>右键点击网页,选择菜单里的“ <em>查看元素</em> ”。</p> </li>     <li> <p>如果你用键盘的话,Windows的快捷键是Ctrl + Shift + I, Linux或者苹果OS X的快捷键是Cmd + Opt + I。</p> </li>    </ul>    <p>接下来,点击“ <em>性能</em> ”标签页。这有一个“ <em>开始记录性能</em> ”的按钮,用于记录网站性能。</p>    <p><img src="https://simg.open-open.com/show/47523dbdaa04dde3533cd202bbb8e1ec.png"></p>    <p>点击开始记录,然后等几秒,或者在网页上做些什么。结束之后,点击“ <em>停止记录性能</em> ”按钮。</p>    <p><img src="https://simg.open-open.com/show/64f49fa8ac64037b30a80f2df8eb2e39.png"></p>    <p>稍等几秒,Firefox就会显示出很多组织好的数据,这些数据可以帮助你理解代码中的瓶颈。</p>    <p>性能记录的结果如下图所示:</p>    <p><img src="https://simg.open-open.com/show/9f3d69126886f1ed119a56724c97182f.png"></p>    <p><em>瀑布</em> 部分来检查和CSS的transition、关键帧动画相关的问题的最适合不过。另两个部分分别是“ <em>调用树</em> ”和“ <em>JS火焰图</em> ”,你可以在这里找到JS代码的性能瓶颈。</p>    <p>瀑布页在顶部有一个全局的摘要部分,之下是具体的细分内容。在这两块里,数据都是红色的。</p>    <ul>     <li> <p>黄色柱状图代表JavaScript操作。</p> </li>     <li> <p>紫色柱状图代表计算HTML元素的CSS样式(或者重新计算样式)以及页面布局。布局操作对浏览器而言非常耗时,如果你的动画属性涉及到重复的布局(例如 margin , padding , top , left ,等等),结果可能非常不好。</p> </li>     <li> <p>绿色柱状图代表把页面元素绘制到比特图中去。动画属性例如 color , background-color , box-shadow ,等等,可能会增加高昂开销的操作,有可能导致动画粘滞,带来不好的用户体验。</p> </li>    </ul>    <p>你可以选择需要检查的数据类型。例如,我就只看CSS相关的数据,因此可以点击左上角的漏斗图标取消选择其他的数据类型。</p>    <p><img src="https://simg.open-open.com/show/0b4c33a104147a412f97331ad54aeeba.png"></p>    <p>瀑布摘要部分下方的绿色柱状图代表页面的每秒帧数。</p>    <p>一个正常的页面,可能每秒帧数看起来很高,但更重要的是一致性,也就是说,每秒帧数不能有较大的跌宕起伏。</p>    <p>让我们用下面这个例子加以说明。</p>    <h3>性能检查工具</h3>    <p>这是一个利用 @keyframes 关键字做出的 <a href="/misc/goto?guid=4959750069927509139" rel="nofollow,noindex">CSS动画</a> 的例子。测试页面是这样的:</p>    <p><img src="https://simg.open-open.com/show/4c3e9e8b744afb59210e894a71c95e8f.png"> <img src="https://simg.open-open.com/show/ebb2e651ede6186b75af7c4617394000.png"></p>    <p>紫色的矩形会在视窗内进出,做无限循环。</p>    <p>我通过设置这个 div 元素的 margin-left 来控制这个元素在视窗里位置。 @keyframes 关键帧的设置如下:</p>    <pre>  <code class="language-css">@keyframes slide-margin {    100% {      margin-left: 0;    }  }</code></pre>    <p>这段动画的性能分析图如下:</p>    <p><img src="https://simg.open-open.com/show/b32333bc7c41cddedf46f95344de3695.png"></p>    <p>每秒帧数看上去有些参差不齐,平均值大概是44.82秒,略低。</p>    <p>另外,还需要注意到布局和绘制操作在整个动画过程中占据的部分。这些是浏览器在主线程里的开销较大的操作,会对整体的性能产生一些负面影响。</p>    <p>最后,如果你点击“ <em>查看器</em> ”,点击“ <em>动画</em> ”标签,鼠标悬停在动画名称上时,就会看到弹出框里显示当前动画的相关参数。如果你的动画经过优化,这里会有一条消息明确指示出来。本例的动画未经优化。</p>    <p><img src="https://simg.open-open.com/show/ddab035ef985e87e665657d4deb61cc6.png"></p>    <p>现在,我对代码稍微做一些改动,然后重新记录浏览器使用 @keyframes 时针对 translate3d() 的属性操作。</p>    <pre>  <code class="language-css">@keyframes slide-three-d {    100% {      transform: translate3d(0, 0, 0);    }  }</code></pre>    <p>下面是新代码的性能概况:</p>    <p><img src="https://simg.open-open.com/show/b26a5f4c4b8d012429ebede568b725e3.png"></p>    <p>这次每秒帧数高了一点,56.83fps,瀑布图里并没有看到开销大的布局和绘制操作。</p>    <p>如果你打开“ <em>查看器</em> ”,查看“ <em>动画</em> ”面板,然后鼠标悬停在动画名上,你会看到如下信息:</p>    <p><img src="https://simg.open-open.com/show/ed9c64b0f29fae90a8c29b0e298bb29b.png"></p>    <p>提示信息表明动画已经有所优化,对网站用户而言这是件好事。</p>    <h2>仅使用CSS的 Opacity , Transforms 和 Filters 用于动画效果</h2>    <p>也许你听过类似的建议,但以防万一,还是需要再重复一遍:如果你希望动画效果流畅,那么只利用 opacity , transforms , filters 这些属性做动画。没有限制的动画会让浏览器不堪重负,在很少的时间内执行开销很大的操作,最终并不能达到很好的效果。</p>    <p>就像开发者工具显示的这样,重新布局页面或者绘制元素都不是帮助我们的朋友。</p>    <p>然而, 不同浏览器处理CSS属性稍有不同。如果你希望知道哪些浏览器会针对哪些属性触发页面的布局、绘制事件(尤其是更新某些属性时,可能会涉及到动画的),请看 <a href="/misc/goto?guid=4959717694193857361" rel="nofollow,noindex">CSS Triggers</a> 。</p>    <p>为了保证高性能动画,常用的方法就是迫使浏览器把属性更新的任务交给GPU(图形处理器)去做,这样就通过利用硬件加速减轻了浏览器主线程的压力。你还可以使用 <a href="/misc/goto?guid=4959750070041255409" rel="nofollow,noindex"> will-change </a> 这一CSS属性,或者 translateZ(0) 以及 translate3d(0,0,0) 的小技巧。上面的方法都行的通,但如果你过度使用也依然可能引起不可避免的性能问题,比如说动画卡顿。</p>    <p>这里我就不详细说明硬件加速对网页性能动画的影响了,如果你需要深入研究,下面是一些可用的参考资料。</p>    <h2>资源</h2>    <ul>     <li> <p>Paul Lewis 和 Paul Irish的 <a href="/misc/goto?guid=4959739359622893353" rel="nofollow,noindex">High Performance Animations</a> 。</p> </li>     <li> <p>Max Vujovic的 <a href="/misc/goto?guid=4958973241641531408" rel="nofollow,noindex">CSS animations and transitions performance: looking inside the browser</a></p> </li>     <li> <p>Paul Lewis 和 Sam Thorogood的 <a href="/misc/goto?guid=4959750070189660955" rel="nofollow,noindex">Animations and Performance</a> 。</p> </li>     <li> <p>Paul Lewis 的 <a href="/misc/goto?guid=4959750070268729409" rel="nofollow,noindex">Stick to Compositor-Only Properties and Manage Layer Count</a> 。</p> </li>     <li> <p>Sara Souiedan 的 <a href="/misc/goto?guid=4959636983613702218" rel="nofollow,noindex">Tricks for GPU Composited CSS</a> 。</p> </li>     <li> <p>Nick Salloum的 <a href="/misc/goto?guid=4959750070385428762" rel="nofollow,noindex">An Introduction to the CSS will-change Property</a> 。</p> </li>     <li> <p>MDN的 <a href="/misc/goto?guid=4959750070476129734" rel="nofollow,noindex">Animating CSS properties</a> 。</p> </li>    </ul>    <p>  </p>   <p>来自:http://www.zcfy.cc/article/check-css-animation-performance-with-the-browser-039-s-dev-tools-mdash-sitepoint-3146.html</p>    <p></p>    <p> </p>