Chrome DevTool时间线视图中渲染和绘画事件之间的区别是什么

时间:2013-09-10 01:55:24

标签: google-chrome google-chrome-devtools

我认为renderpaint都意味着渲染页面,显示DOM

有什么区别?

3 个答案:

答案 0 :(得分:37)

渲染事件是关于与每个DOM节点相关联的计算样式(即“样式重新计算”)和页面上的元素位置(“布局”)。 Paint类别实际上是绘制像素,包括“Paint”本身和“Decode Image”/“Resize Image”等事件。简而言之,它是关于内部结构与外观 - 如果您的页面花费大量时间渲染,这是因为其DOM和CSS的结构(例如,大型DOM树),而显着的绘制时间通常意味着外观该页面正在影响性能(例如,某些样式的绘制成本很高或图像太大)。

答案 1 :(得分:10)

 Rendering            Painting     

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

答案 2 :(得分:5)

在最新版本的Chrome(v51 +)中,时间轴中有两个相关事件:布局绘制(不再有“渲染”事件)。< / p>

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

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

布局具有三维(z索引),结构(线,框,流)和父子关系(树)的概念。在绘画中,我们将所有这些信息压缩为二维。绘画的结果只是像素及其颜色的二维网格。这是你在屏幕上看到的。所有结构都已丢失。

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