What's the differences between rendering and painting event in Chrome DevTool Timeline View

Question

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

What\'s the differences?

Answer 1

In recent versions of Chrome (v51+) there are two relevant events in the timeline: layout and paint (there is no longer a "render" event).

• layout refers to the process of construting a render-tree and using that tree to compute the exact position and size of each object

• painting refers to the process of taking the previously computed positions drawing the colors to the screen

Layout has a notion of three-dimensions (z-indexes), structure (lines, boxes, flow) and parent-child relationships (trees). In painting, we flatten all of this information down to two-dimensions. The result of a paint is just a 2d-grid of pixels and their colors. It's what you see on the screen. All structure has been lost.

More information: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en