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