42

我认为renderand paintjust 都意味着渲染页面，显示 DOM

有什么区别？

4

3 回答 3

52

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

于 2013-09-10T14:51:59.487 回答
11

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

  • 布局是指构建渲染树并使用该树计算每个对象的确切位置和大小的过程

  • 绘画是指将先前计算的位置绘制到屏幕上的过程

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

更多信息：https ://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en

于 2016-07-25T11:13:05.997 回答
10 
 Rendering            Painting     

   ______________
  / E      F /   |
 ____________    |    ____________
 |      A    |   |    |     A     |
 |           | G |    |           |
 |           |   |    |           |
 | B      D  |   |    | B      D  |
 |           |   |    |           |
 |     C     | H/     |     C     |
 |___________|_       |___________
于 2014-12-08T19:57:41.407 回答