14

I would like to know about the "dom tree" and "render tree" difference ?

Is the render tree constructed from the "dom tree" or It is different tree made by browser ?

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
Jaswant Mandloi
  • 335
  • 3
  • 7
  • 3
    @EdHeal This Stack Overflow question is at the top of the Google search results for "render tree". – ChrisW Dec 15 '17 at 15:57
  • a great explanation here https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction – vineet Jan 24 '20 at 11:58

3 Answers3

6

Great question. The DOM tree is essentially the tree containing all of your HTML elements (nodes), whereas the render tree is a culmination of the DOM and CSSOM trees. The render tree is the one that is actually rendered onto the page. Hope this helps! I have written an article about this, check it out :)

archived Web Science - Browser Internals (Rendering - Constructing the DOM Tree)

http://www.jjburton.com/2016/02/12/web-science-browser-internals-rendering.html (Dead Link)

The big question...'How does the browser render a web page?'. Before starting, let's quickly answer some sub-questions: …

greybeard
  • 2,249
  • 8
  • 30
  • 66
jburtondev
  • 2,827
  • 1
  • 14
  • 20
1

These are some very good articles, I think you should read first!

  1. What Every Frontend Developer Should Know About Webpage Rendering

    http://frontendbabel.info/articles/webpage-rendering-101/

  2. How browsers work : Behind the scenes of modern web browsers

    http://taligarsiel.com/Projects/howbrowserswork1.htm

  3. Render-tree Construction, Layout, and Paint

    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

hope for help for you!

xgqfrms
  • 10,077
  • 1
  • 69
  • 68
  • 1
    The CSSOM and DOM trees are combined into a **render tree**, which is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to screen. Optimizing each of these steps is critical to achieving optimal rendering performance. – xgqfrms Dec 02 '16 at 10:58
  • So after the render tree is built, we will see images/sub-resources/subframes being downloaded as stated here https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event. Do you know if these images/subframes/sub resources are called by the Render Tree after it was built, or were they already called by the DOM tree while the render tree was still being built? – weefwefwqg3 May 12 '20 at 04:10
0

Render tree is created by combining the DOM tree (Made from parsing the HTML) and CSSOM(Made from parsing the CSS defined for the document) tree.

Render tree only contains the nodes which will be visible on the screen, i.e. if the display for any of the node is marked as none then it won't be the part of the render tree.

Render tree is then passed to the layout phase and eventually to the paint phase which paints the actual pixels on the screen and the content is visible to you.

To answer your question: Both dom tree and render tree is created by the browser only and yes render tree is made from the dom tree as explained above.

Minkesh Jain
  • 1,140
  • 1
  • 10
  • 24