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