Chrome DevTool时间轴视图中的渲染和绘画事件有什么区别 [英] What's the differences between rendering and painting event in Chrome DevTool Timeline View

问题描述

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

I think the render and paint just both mean rendering the page, show the DOM

有什么区别?

推荐答案

渲染事件是关于与每个DOM节点关联的计算样式(即样式重新计算")以及页面上元素的位置(布局").绘画类别实际上是关于绘画像素的，包括绘画"本身和解码图像"/调整图像大小"之类的事件.简而言之，它是关于内部结构与外观的关系-如果您的页面花费大量时间进行渲染，这是因为其DOM和CSS的结构(例如，大型DOM树)，而大量的绘制时间通常意味着外观页面中的内容会影响性能(例如，某些样式的绘制成本很高或图像太大).

Rendering events are about computing styles associated with each DOM node (i.e. "Style Recalculate") and elements position on the page ("Layout"). Paint category is about actually painting pixels and includes events like "Paint" itself and "Decode Image" / "Resize Image". In a nutshell, it's about inner structure vs. appearance -- if your page spends a lot of time rendering, this is because of the structure of its DOM and CSS (e.g. a large DOM tree), while significant paint times often mean the appearance of the page is affecting the performance (e.g. some styles are expensive to paint or an image is too large).

这篇关于Chrome DevTool时间轴视图中的渲染和绘画事件有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！