专注于
IT技术和业内交流

Chrome DevTools — 分析 Runtime 性能

用户们期望看见有交互且如丝般顺滑的页面。但是在页面绘制的过程中每步都可能出现卡顿。
接下来我们将学习相关工具和策略来确定和修复常见的性能问题。

JavaScript

JavaScript 的计算,特别是那些引发大范围视觉变化的计算,会降低应用程序的性能。
不要让badly-timed 或 long-running 这样的 JavaScript代码干扰与用户的交互。

工具(Tools)

使用 时间轴(Timeline) recording记录并评估脚本事件。
如果发现可疑事件,你可疑启用JS分析器(JS Profiler) 再现过程以获得更多信息,
以便查出到底是哪个js 函数引起的长计算。

如果你在你的 JavaScript 中注意到相当多的jank(注: 俚语,这里指的应该是 可疑js事件),
你可能需要收集一个CPU profile,并记录分析更下一层。
CPU profile 可以显示你页面中的函数在何时何地被执行多久。
如果想了解如何创建CPU profiles请点击这里

问题(Problems)

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

问题 示例 解决方案
昂贵的输入处理程序,影响页面反应或动画。 触摸,视差滚动。 让浏览器处理触摸和滚动或尽可能晚的绑定侦听器 (见 Paul Lewis 的Runtime性能清单中的昂贵输入).
Badly-timed JavaScript 影响响应、动画或者加载. 用户使用setTimeout / setInterval实现向右拖滑动条并加载数据. 优化方案: 使用 requestAnimationFrame, 分散DOM操作, 使用 Web Workers.
Long-running JavaScript 影响响应. The DOMContentLoaded 事件 已经被JS 淹没. 将你的纯计算移入 Web Workers。如果需要DOM操作情使用 requestAnimationFrame (见 优化JS执行性能).
`Garbage-y` 脚本 影响响应、动画. 垃圾回收(`Garbage collection` )可能在任何地方触发. 少写 `garbage-y` 脚本 (见 Paul Lewis 的Runtime性能清单中的—在动画中的垃圾回收).

Style

Style 的改变是昂贵的,特别是这些改变会引起其他相关节点的改变时。
任何时候你对元素的style的修改浏览器都会找到并计算相关节点的位置,大小,颜色然后重绘。

工具

Timeline 录制. 录制大量的 Recalculate Style 事件 (紫色部分).

单击Recalculate Style事件,在 Details 窗格中查看有关它的详细信息。
如果样式更改用了很长时间,这可能是各性能问题。如果样式计算影响大量的元素,这在另一个方面来说还有改进的余地。

Long recalculate style

为了减小Recalculate Style的影响,我们可以:

问题

下表描述了一些常见的style问题和可能的解决方案︰

问题 示例 解决方案
昂贵的style 计算影响响应或动画。 更改元素的几何形状,宽度、 高度或位置; 浏览器会计算所有其他元素的相关变化并重绘。 避免触发 layouts 的CSS。
复杂选择器影响响应或动画。 嵌套的选择器强制浏览器知道有关的父节点子节点的所有信息。 确保调用你CSS的元素是同一级的

Layout

Layout (或火狐中的reflow) 是浏览器计算页面上所有元素的位置和大小的过程。页面的layout这种模型决定了一个元素是可以影响其他节点的;
例如,元素的宽度通常会影响树上子节点宽度等等。浏览器的这个计算过程是十分复杂的。

作为一个通用的法则,如果你要在DOM 树complete 之前获得一个元素的某项值,你将触forced synchronous layouts(强制同步layouts)
这可能会导致严重的性能问题,当频繁的这样操作或 DOM 树本来就很大时。

Tools

Chrome DevTools Timeline会标识网页触发强制同步的所有事件。这些Layout事件显示为红色。

forced synchronous layout

“布局抖动(Layout thrashing)”是一个重复强制同步的条件。
出现这种情况是当 JavaScript 反复从DOM写入和读取,这迫使浏览器反复重新布局。
若要标识布局抖动,寻找强制同步警告 (如上面的截图)。

Problems

下表描述了一些常见的layout问题和可能的解决方案︰

问题 示例 解决方案
强制同步 layout 影响响应或动画。 强制浏览器较早的在渲染线程执行layout,造成重复渲染变化过程中的界面。 批量读取你的style之后再做修改。 (见 避免大型, 复杂布局和布局抖动).
布局抖动影响响应或动画。 将浏览器放入一个读写读写周期,强制浏览器在一遍遍的循环中重新计算layout。 使用 FastDom 库自动批量的读写.

Paint and composite

绘制(Paint)是填充像素的过程。它往往是渲染过程中最昂贵的部分。如果你注意到你的页面出现任何闪动,很可能你的页面有绘制问题。

合成是指确定绘制好的页面块在页面上的位置并组装显示在屏幕上。大多数情况下,如果你坚持compositor-only 属性和避免Paint,
你应该能看到页面性能有很大改善,但你需要提防过量的层计数(layer counts)(见 Stick to compositor-only properties and manage layer count).

Tools

想知道绘制需要多长时间?使用Timeline 面板上的绘制探查器(Paint profiler) 录制
如果你的渲染时间大部分都花在绘制上,那就说明你的绘制过程有问题。

Long paint times in timeline recording

签出rendering settings菜单 ,可以帮助诊断绘制问题。

Problems

表描述了一些常见的paint 、 composite问题和可能的解决方案︰

问题 示例 解决方案
大量绘制工作影响响应或动画。 大绘制区或昂贵的绘制工作会影响交互与动画 使用transforms 和 opacity 促使元素在自己的layer内移动 避免paint (见 简化绘制复杂性和减少绘制区域).
过多Layer 影响性能. 太多的元素使用 translateZ(0) 极度影响性能. 尽可能减少layers,仅当你知道使用它确有改善的情况方才使用translateZ(0) (见 Stick to composite-only properties and manage layer count).

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

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 分析 Runtime 性能

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们