google-chrome - Chrome DevTool Timeline View 中的渲染和绘制事件有什么区别

Question

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

有什么区别？

Answer 1

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