49

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

What's the differences?

Jitin Maherchandani
  • 667
  • 2
  • 7
  • 15
hh54188
  • 14,887
  • 32
  • 113
  • 184
  • I'd guess it is just different naming for the same thing as http://stackoverflow.com/q/2549296/1331430 but there may be something else now that Blink has changed the rendering a bit. – Fabrício Matté Sep 10 '13 at 04:54
  • There are definitely not the same thing (what would be the reason for differentiating them on the timeline?). Anyway, @FabrícioMatté found the right link, it just uses different naming convention (render -> reflow, paint -> repaint). – Konrad Dzwinel Sep 10 '13 at 09:53
  • "the same thing" I meant as in, render/reflow and paint/repaint. – Fabrício Matté Sep 10 '13 at 11:29

3 Answers3

57

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

caseq
  • 1,929
  • 1
  • 16
  • 9
13
 Rendering            Painting     

   ______________
  / E      F /   |
 ____________    |    ____________
 |      A    |   |    |     A     |
 |           | G |    |           |
 |           |   |    |           |
 | B      D  |   |    | B      D  |
 |           |   |    |           |
 |     C     | H/     |     C     |
 |___________|_       |___________
ad48
  • 205
  • 2
  • 2
  • 4
    What does it mean? What are A,B,C ... etc? – WebBrother Jan 09 '19 at 14:18
  • 4
    This answer does not fully explain the difference. you could perhaps mention what the render process is actually doing vs what the painting process does. – J-Cake Jul 07 '19 at 09:35
  • 1
    i guess painting is flat. Literally painting(pixel) And the rendering is 3D it mean structure – MINJA KIM Dec 03 '19 at 23:32
  • I think this illustrates that painting is calculating the final colour of each pixel given all the elements on the screen, their opacities and who's on top of who. Rendering involves calculating the appearance of each individual element, even if they're gonna be blocked by other elements overlaying on top of it. Rendering is more towards the initial step while painting is the final step. – Beast Aug 30 '23 at 08:06
12

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

James Lawson
  • 8,150
  • 48
  • 47