用于绘制性能分析的连续绘制模式现已在 Chrome Canary 中推出。本文介绍了如何发现网页绘制时间存在问题，以及如何使用这款新工具检测绘制性能瓶颈。
调查网页上的绘制时间
您发现自己的网页无法流畅滚动。您可以通过这种方式着手解决问题。在本例中，我们将使用 Dan Cederholm 的演示页面 Things We Left On The Moon 作为示例。
您打开 Web 检查器，开始录制时间轴，然后上下滚动网页。然后，您可以查看垂直时间轴，了解每个帧中发生的情况。
如果您发现大部分时间都花在了绘制上（大绿条高于 60fps），则需要仔细研究出现这种情况的原因。如需调查绘制操作，请使用 Web 检查器的显示绘制矩形设置（Web 检查器右下角的齿轮图标）。这会显示 Chrome 绘制内容的区域。
Chrome 重新绘制网页区域的原因有很多：
- JavaScript 中的 DOM 节点发生更改，导致 Chrome 重新计算网页的布局。
- 动画正在播放，并会以基于帧的周期进行更新。
- 用户互动（例如悬停）会导致某些元素的样式发生变化。
- 导致页面布局发生更改的任何其他操作。
作为开发者，您需要了解页面上发生的重绘。查看绘制矩形是一种很好的方法。在上面的示例屏幕截图中，您可以看到整个屏幕被一个大的绘制矩形覆盖。这意味着，整个屏幕会在您滚动时重新绘制，这并不理想。在本例中，这是由 CSS 样式 background-attachment:fixed 导致的，该样式会导致页面的背景图片保持在同一位置，而页面内容会在您滚动时在其上方移动。
如果您发现重新绘制会覆盖较大的区域和/或需要很长时间，可以通过以下两种方式解决：
- 您可以尝试更改页面布局，以减少绘制工作量。Chrome 会尽可能只绘制一次可见的网页，并在您向下滚动时添加之前未显示的部分。不过，在某些情况下，Chrome 需要重新绘制某些区域。例如，CSS 规则
position:fixed通常用于保持在同一位置的导航元素，可能会导致这些重绘。 - 如果您想保留页面布局，可以尝试降低重新绘制区域的绘制费用。并非每种 CSS 样式都有相同的绘制开销，有些样式对绘制开销的影响很小，有些样式的影响很大。确定特定风格的绘制费用可能需要大量工作。为此，您可以在“元素”面板中切换样式，然后查看时间轴录制内容中的差异，这意味着您需要在面板之间切换并进行大量录制。这时，连续绘制模式就派上用场了。
连续绘制模式
连续绘制模式是一种工具，可帮助您确定网页上哪些元素的绘制开销较高。它会将页面置于始终重绘状态，并显示一个计数器，用于显示正在进行的绘制工作量。然后，您可以隐藏元素并更改样式，同时观察计数器，以便找出运行缓慢的部分。
设置
如需使用连续绘制模式，您需要使用 Chrome Canary。
在 Linux 系统（以及某些 Mac 电脑）上，您需要确保 Chrome 在复合模式下运行。您可以使用 about:flags 中的 GPU 合成所有网页设置永久启用此功能。
开始使用
您可以通过 Web 检查器设置（Web 检查器右下角的齿轮图标）中的启用持续页面重新绘制复选框来启用持续绘制模式。
右上角的小显示屏会显示测量到的绘制时间（以毫秒为单位）。更具体地说，它会显示：
- 左侧是上次测量的绘制时间。
- 右侧当前图表的最小值和最大值。
- 底部显示过去 80 帧历史记录的条形图（图表中的线表示 16 毫秒作为参考点）。
绘制时间测算结果取决于屏幕分辨率、窗口大小和 Chrome 所运行的硬件。请注意，这些内容对您的用户而言可能有所不同。
工作流程
您可以通过以下方式使用持续绘制模式来跟踪会增加大量绘制开销的元素和样式：
- 打开 Web 检查器的设置，然后选中启用持续页面重绘。
- 前往“元素”面板，然后使用箭头键或通过选择页面上的元素来遍历 DOM 树。
- 使用新引入的辅助功能 H 键盘快捷键可切换元素的显示状态。
- 查看绘制时间图表，并尝试找出增加绘制时间的元素。
- 查看该元素的 CSS 样式，在查看图表的同时开启和关闭这些样式，以查找导致速度变慢的样式。
- 更改此样式，然后再进行一次时间轴记录，看看网页的效果是否有所提升。
以下动画展示了切换样式及其对绘制时间的影响：
此示例演示了如何通过关闭 CSS 样式 box-shadow 或 border-radius 来大幅缩短绘制时间。对元素同时使用 box-shadow 和 border-radius 会导致绘制操作非常耗费资源，因为 Chrome 无法针对此进行优化。因此，如果您有需要进行大量重绘的元素（如示例中所示），则应避免这种组合。
备注
连续绘制模式会重新绘制整个可见页面。浏览网页时通常不会出现这种情况。滚动通常只会绘制之前不可见的部分。对于页面上的其他更改，系统只会重新绘制尽可能小的区域。因此，请通过其他时间轴记录检查您的样式改进是否确实对网页的绘制时间有影响。
使用 continuous painting mode 时，您可能会发现，例如 CSS 样式 border-radius 和 box-shadow 会增加大量绘制时间。不过，我们并不会阻止您使用这些功能，它们非常棒，我们很高兴它们终于推出了。但请务必了解何时何地使用这些功能。
避免在需要大量重绘的区域使用它们，并且一般避免过度使用它们。
实时演示
点击下方观看演示，了解 Paul Irish 如何使用连续绘制来识别特别耗时的绘制操作。