Menu
I think the render and paint just both mean rendering the page, show the DOM
What's the differences?
415
you may hear the term "rasterize" used in conjunction with paint. This is because painting is actually two tasks: 1) creating a list of draw calls, and 2) filling in the pixels. The latter is called "rasterization" and so whenever you see paint records in DevTools, you should think of it as including rasterization.
Press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, ChromeOS) to open the Command Menu. Start typing rendering , select Show Rendering, and press Enter .
Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account ( display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen.
This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.
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).
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
