JavaScript运行时性能分析

原文:https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/analyze-runtime?hl=en 需翻墙
作者:Kayce Basques(Technical Writer at Google), Meggin Kearney(Meggin is a Tech Writer)

运行时性能

为了确保你的网站在任何设备上看起来很好且运行流畅。可以在浏览器渲染页面元素的时候,使用工具来识别和解决一些常见问题。

运行时性能分析

用户期待页面可以交互,并且流畅。像素管道的每个阶段都是一个很好的机会来说明jank现象。 学习工具和策略来定位和解决那些降低运行时性能的常见问题。

JavaScript

JavaScript的计算,尤其是那些触发大量视觉变化的,可能拖慢应用性能。不要让不良定时程序或长时间运行的JavaScript干扰到用户交互。

工具

创建一个Timeline记录,寻找可疑的长时的Evaluate Script(计算脚本)事件。如果找到了,启用JS Profiler功能,重新记录一次来得到更多关于哪些JS函数被调用和每个阶段消耗时长的细节。

如果在你的JavaScript中发现了很多jank现象,你可能需要更高层级的分析,收集一个JavaScript CPU profile。CPU profiles展示了页面上函数执行所花费的时间。在Speed Up JavaScript Execution(本系列的第二篇文章)学习如何创建CPU profiles。

问题

下面表格描述了一些常见的JavaScript问题和可能的解决方案:

问题例子解决方案
昂贵的输入处理影响响应和动画触摸,视觉滚动让浏览器处理触摸和滚动,或者尽可能晚的绑定监听(see Expensive Input Handlers in Paul Lewis’ runtime performance checklist)
不良的定时JavaScript程序影响响应、动画和加载用户在页面加载后滚动,通过setTimeout/setInterval实现动画优化JavaScript执行 使用requestAnimationFrame,在框架之上展开DOM操作,使用Web Worker
长时间运行的JavaScript影响响应在繁忙的js运行工作时,DOMContentLoaded事件停止。将纯计算的工作移到web workers中,如果需要访问DOM,使用requestAnimationFrame(优化JavaScript执行)
garbage-y的脚本影响响应和动画垃圾回收发生在任何地方少些garbage-y的脚本 (Garbage Collection in Animation in Paul Lewis’ runtime performance checklist)

样式

样式的变化代价很高,尤其是那些不止影响一个元素的DOM的变化。一旦你将样式应用到元素上,浏览器就会算出所有与之相关元素,重新计算它们的布局并且重绘页面。

相关指导
降低样式计算的范围和复杂度

工具

创建一个Timeline记录,查看大块的Recalculate Style(重计算样式)事件记录(紫色显示)。

点击一个 Recalculate Style(重计算样式)的事件,在详细面板中观察它的更多信息。如果这个样式变化花了很长时间,那么这就是一个影响性能的关键点。如果样式计算会影响大量元素,那么它也是一个有待改进的地方。

重计算样式

减少 Recalculate Style (重计算样式)的影响

  1. 使用CSS Triggers来学习哪些CSS属性分别会触发布局、重绘或者合成。这些属性在渲染性能上影响很严重。
  2. 转到改变影响较少的属性上。看这个指导 优先使用渲染层合并属性、控制层数量
问题

下面表格描述了一些常见的样式问题和可能的解决方案:

问题例子解决方案
昂贵的样式计算影响响应和动画任何改变元素几何结构的CSS属性,像width, height, 或者 position。浏览器就必须检查其他所有元素来重做布局。避免大规模、复杂的布局
复杂的选择器影响响应和动画嵌套的选择器迫使浏览器要知道所有其他的元素情况,包括父元素和子元素。降低样式计算的范围和复杂度

布局

布局(或Firefox中的回流)是指浏览器计算页面上所有元素的位置和大小的过程。网页的布局模型意味着一个元素可以影响其他元素。例如,元素的width往往会影响其子元素的宽度,同理,整棵树自上而下都存在。这个过程对于浏览器是相当复杂的。

一般经验来说,如果你在一个frame完成之前请求其DOM中的几何值,你会意识到这是一个”forced synchronous layouts”(强制同步布局),如果在一棵大的DOM树中频繁的重复执行这将是个很大的性能瓶颈。

相关指导
避免大规模、复杂的布局
诊断强制同步布局 (本系列的第三篇文章)

工具

当一个页面发生强制同步布局时,chrome开发工具Timeline 会识别出来。这些布局事件被用红色条来标注。

强制同步布局

“Layout thrashing”是一个重复强制同步布局的条件,它发生在JavaScript反复读写DOM,迫使浏览器一遍又一遍的的重计算布局的时候。为了定位layout thrashing,请查看强制同步布局的警告。(如上截图)

问题

下面表格描述了一些常见的布局问题和可能的解决方案:

问题例子解决方案
强制同步布局影响响应和动画迫使浏览器在像素管道中过早的执行布局,在渲染过程中导致重复步骤。分批处理样式,先读后写。避免大规模、复杂的布局
Layout thrashing影响响应和动画让浏览器进入一个read-write-read-write的循环周期中,迫使浏览器一遍又一遍的的重计算。使用FastDOM库,自动批量处理读写操作。FastDOM库

绘制和组合

绘制是像素填充的过程。它通常是渲染过程中最消耗性能的部分。如果你注意到页面出现jank情况,很可能就是绘制问题。

合成就是将页面上画好的部分放到一起在屏幕上展现。大多数情况,如果坚持仅合成属性和避免完全绘制,将会对性能上有个重要的提升,但是需要避免过多的层。优先使用渲染层合并属性、控制层数量

工具

想知道绘制需要多长时间和多长时间发生一次绘制吗?激活Timeline上的Paint profiler面板然后创建一个记录。如果大部分渲染时间花在绘制上,那么就是有绘制问题了。

长时间绘画

进一步检查渲染设置菜单配置可以帮助判断绘制问题。

问题

下面表格描述了一些常见的绘制问题和可能的解决方案:

问题例子解决方案
大规模绘制影响响应和动画大的绘制区域或者复杂的绘制影响响应和动画避免绘制,在同一个层中移动元素,使用变换和不透明。(简化绘制的复杂度、减小绘制区域)
层爆炸(层数过多)影响动画太多有translateZ动画效果的元素极大影响动画性能减少层数,只有当你知道它确实能提供优化作用的时候才使用层。(优先使用渲染层合并属性、控制层数量)

备注

Layout thrashing:为了最大化渲染性能,Chrome通常会在应用程序中批处理布局变化请求,并制定一个计划来异步计算和渲染这些变化请求。尽管如此,当一个应用程序获取依赖于布局的属性值的时候(比如offsetHeight或offsetWidth),Chrome依然会强制立刻同步渲染页面布局。我们称之为强制同步布局。这会明显的降低渲染的性能,在大的DOM树中重复运行时尤为明显。这种情形也被称之为”layout thrashing”。

Jank,就是当用户浏览网站或者app的时候,刷新频率没有跟得上时,出现的卡顿、不稳定或者停止的现象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值