专注于
IT技术和业内交流

Chrome DevTools — 检测强制Layouts同步

学习用DevTools调试重排(或者叫重新布局).

这篇教程通过一个demo来展示如何调试由重排导致的问题. requestAnimationFrame()是google推荐的方法用来实现frame-based的动画。
demo就用[requestAnimationFrame()]来实现图片动画。导致动画停顿的原因有很多,我们的目标就是找出并修复导致动画停顿的问题,让demo中的动画能够达到丝滑般的60 FPS。

搜集数据

第一步搜集数据,了解网页运行时发生了些什么事情。

  1. 打开demo页
  2. 打开Timeline面板。
  3. 开启JS Profile,便于后面分析火焰图时了解哪个函数被调用过。
  4. 点击页面上的Start启动动画。
  5. 点击Timeline面板中的Record按钮开始Timeline录制。
  6. 让网页跑一会儿(两秒钟)。
  7. 再次点击Record按钮停止录制。

接下你应该会看见类似下面这张图一样的Timeline面板.

timeline recording of janky demo

确定问题

到目前为止,我们已经搜集到一堆数据,接下来一一分析这些数据.

在Timeline的Summary窗口你可以看到浏览器花了绝大部分时间在rendering。如果可以优化网页的layout动作,就可以减少rendering花的时间。

Timeline summary

接下来观察一下Overview窗口中的粉红色时间条。这些时间条代表帧。把鼠标放在上面可以看到关于该帧更详细的信息。

long frame

这些帧花了很长时间完成。为了流畅的效果,帧频率需要达到60 FPS.

现在看看到底哪里有问题。用鼠标放大调用堆栈。

zoomed timeline recording

堆栈顶部是一个Animation Frame Fired事件。每当该事件产生时,传递给requestAnimationFrame()的参数就会被调用一次。
Animation Frame Fired下面是Function Call再下面是update. 你可以推断update()requestAnimationFrame()的回调函数。

注意: 如果JS Profile没有开启,你就只能看到Function Call和所有的紫色事件(后面会介绍),看不到具体是哪个函数被调用了。

Hover over these events and you see that DevTools is warning you that your
现在我们看一下update事件下面的小紫色事件. 其中大多数紫色事件的顶部都是红色的警告标志。移动鼠标到这些事件上面,你会发现DevTool在警告你:重排可能是这个页面的性能瓶颈。

hovering over layout event

接下来我们来看看导致重新布局的函数。点击其中一个布局事件,在Summary窗口你应该可以看到这个事件的详细信息。
点击Layout Forced (update @ forcedsync.html:457)下面的链接可以跳转到函数定义。

jump to function defintion

Sources面板,你应该可以看到函数定义。

function definition in sources panel

update()requestAnimationCallback()的回调函数。该函数根据图片的offsetTop计算其left属性。这样迫使浏览器立即执行重新布局。
每个动画帧的重排就是导致页面卡顿的原因。

现在你已经找到问题所在了,你可以直接在DevTools里修改代码测试你的解决方案。

在DevTools里修复问题

这是一段内嵌在HTML里的脚本, 因此你可以直接在Sources面板里编辑(在js文件里的脚本都可以在Sources面板里编辑)。

为了测试你的修改,你可以在控制台重新定义update函数。从HTML文件里复制其原来的定义,删除引用了offsetTop的语句,放开被注释的那条语句,最后按下Enter

redefining the problematic function

重新开始动画,你会发现流畅多了。

再次检查Timeline记录

最好在修改代码后再次检查Timeline记录,确认动画是否真的更快了,性能更好了。

timeline recording after optimization

如上图所示,确实好多了。

本文由向波翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 检测强制Layouts同步

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们