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

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).

 Rendering            Painting     

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

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