Chrome DevTools 时间轴视图中的渲染和绘画事件有什么区别答案

【问题标题】：What's the differences between rendering and painting event in Chrome DevTool Timeline ViewChrome DevTools 时间轴视图中的渲染和绘画事件有什么区别
【发布时间】：2013-09-13 14:44:04
【问题描述】：

我认为render 和paint 都意味着渲染页面，显示 DOM

有什么区别？

【问题讨论】：

我猜这只是与 stackoverflow.com/q/2549296/1331430 相同的东西的不同命名，但现在 Blink 已经改变了一些渲染可能还有其他东西。
肯定不是一回事（在时间线上区分它们的原因是什么？）。不管怎样，@FabrícioMatté 找到了正确的链接，它只是使用了不同的命名约定（渲染 -> 回流，绘画 -> 重绘）。
“相同的东西”我的意思是，渲染/回流和绘画/重绘。

标签： google-chrome google-chrome-devtools

【解决方案1】：

在最新版本的 Chrome (v51+) 中，时间轴中有两个相关事件：layout 和 paint（不再有“渲染”事件）。

布局是指构建渲染树并使用该树计算每个对象的确切位置和大小的过程
绘画是指将先前计算的位置绘制到屏幕上的过程

布局具有三维（z-indexes）、结构（线、框、流）和父子关系（树）的概念。在绘画中，我们将所有这些信息扁平化为二维。绘画的结果只是像素及其颜色的二维网格。这就是你在屏幕上看到的。所有结构都已丢失。

【讨论】：

【解决方案2】：

 Rendering            Painting     

   ______________
  / E      F /   |
 ____________    |    ____________
 |      A    |   |    |     A     |
 |           | G |    |           |
 |           |   |    |           |
 | B      D  |   |    | B      D  |
 |           |   |    |           |
 |     C     | H/     |     C     |
 |___________|_       |___________

【讨论】：

什么意思？什么是 A、B、C ...等？
这个答案并没有完全解释差异。您也许可以提及渲染过程实际上在做什么与绘画过程在做什么。
我猜绘画是平的。字面上的绘画（像素）并且渲染是3D的，它意味着结构

【解决方案3】：

渲染事件是关于计算与每个 DOM 节点关联的样式（即“样式重新计算”）和页面上的元素位置（“布局”）。绘画类别是关于实际绘画像素的，包括“绘画”本身和“解码图像”/“调整图像大小”等事件。简而言之，它是关于内部结构与外观的——如果你的页面花费大量时间渲染，这是因为它的 DOM 和 CSS 的结构（例如，一个大的 DOM 树），而显着的绘制时间通常意味着外观页面的大小正在影响性能（例如，某些样式的绘制成本很高或图像太大）。

【讨论】：