Google chrome devtools Devtools中的Timeline Paint Profiler表明所有内容都在绘制中

当我们在Chrome中使用Paint Profiler时，我们可以看到正在绘制的内容。我创建了一个简单的示例，每3秒向页面添加一个新的div，如下所示：

但是，当我在时间轴中使用“paint profiler”时，看起来一切都在重新绘制：

如屏幕截图所示，在第五次绘制中，我们有5次调用drawTextBlob调用。这表明所有的5个div都在喷漆的地方。我只期待一个

有人能解释一下吗？

随着时间的推移，“绘画”事件的确切含义发生了变化。过去的情况是，在绘制过程中，渲染器直接更新图层的位图，这通常很慢。在那些日子里，您可能会发现绘制的矩形与您实际无效的区域相匹配（即，在您的案例中，它只是最后一行），正如您可能期望的那样

Chrome渲染子系统的当前实现要么在其他线程上执行光栅化（试图使事情远离主线程，因为主线程忙于JavaScript执行、DOM布局和许多其他事情），要么在GPU上执行光栅化（查看“光栅化”和“多光栅线程”）在里面chrome://gpu 如果您想知道您平台上的当前模式）。因此，您在主线程上看到的“绘制”事件只包括记录绘制命令的日志（即，您在绘制探查器的左窗格中看到的内容），而没有实际生成任何像素——这相对较快，Chrome选择重新记录整个层，以便稍后选择要栅格化的部分（例如，在预期的滚动情况下）无需再次转到主线程，这可能是由于运行JavaScript或进行布局而导致的

现在，若你们将时间线切换到火焰图表模式（工具栏中“视图”标签附近的右图标），你们将看到“光栅化绘制”事件，即实际光栅化——Chrome在主线程上拾取绘制事件期间记录的绘制命令日志，并重新播放该日志，生成层片段的实际像素。当选择“光栅化绘制”时，您可以看到该层的哪个部分被光栅化，以及该部分的绘制分析器。请注意，对于不同的片段，可能在不同的线程上有许多小的光栅化绘制事件，但它们仍然具有整个日志（例如，在您的示例中有5个drawTextBlob命令）。但是，那些不影响正在光栅化的片段的绘制命令将被剔除，因为它们位于片段的剪辑矩形之外，因此不会对光栅化时间产生明显影响

然后，您可能会注意到，被光栅化的片段仍然比您实际无效的区域大。这是因为Chrome以平铺、小矩形位图（通常为128 x 128，但可能因平台而异）的形式管理光栅化层，因此对于大层（例如，页面比视口长得多），只有视口中可见的部分可以存储在GPU上（通常内存有限），而由于滚动而突然可见的部分可以快速上载

最后，在“渲染选项”中勾选“显示绘制矩形”后，您看到的以绿色高亮显示的部分在技术上是“无效”的矩形——也就是说，由于布局/样式等的改变，页面上的区域确实发生了变化。作为作者，这些区域确实可以直接影响到你，但正如你所看到的，Chrome可能会绘制和光栅化更多的内容，主要是为了高效地管理大型页面的滚动。

“Paint”事件的名称随着时间的推移发生了变化。过去，渲染器在绘制过程中直接更新图层的位图，这通常很慢。在那些日子里，您可能会发现绘制的矩形与您实际无效的区域相匹配（即，在您的情况下，仅是最后一行），正如您可能预期的那样

Chrome渲染子系统的当前实现要么在其他线程上执行光栅化（试图使事情远离主线程，因为主线程忙于JavaScript执行、DOM布局和许多其他事情），要么在GPU上执行光栅化（查看“光栅化”和“多光栅线程”）在里面chrome://gpu 如果您想知道平台上的当前模式是什么），那么您在主线程上看到的“绘制”事件只包括记录绘制命令的日志（即，您在绘制分析器的左窗格中看到的内容），而不实际产生任何像素——这是相对较快的，Chrome选择重新记录整个图层，以便以后可以选择要光栅化的部分（例如，在预期的滚动情况下），而无需再次进入主线程，而主线程可能会因运行JavaScript或进行布局而忙碌

现在，若你们将时间线切换到火焰图表模式（工具栏中“视图”标签附近的右图标），你们将看到“光栅化绘制”事件，即实际光栅化——Chrome在主线程上拾取绘制事件期间记录的绘制命令日志，并重新播放该日志，生成层片段的实际像素。当选择“光栅化绘制”时，您可以看到该层的哪个部分被光栅化，以及该部分的绘制分析器。请注意，对于不同的片段，可能在不同的线程上有许多小的光栅化绘制事件，但它们仍然具有整个日志（例如，在您的示例中有5个drawTextBlob命令）。但是，那些不影响正在光栅化的片段的绘制命令将被剔除，因为它们位于片段的剪辑矩形之外，因此不会对光栅化时间产生明显影响

然后，你可能会注意到被光栅化的碎片仍然比你实际失效的区域大，这是因为Chrome管理的光栅化层是分片的，小的，小的