What is the difference between the browser DOM tree and the render tree

Question

I would like to know about the difference between "tree tree" and "tree rendering"?

Is the rendering tree built from a "tree tree" or is it another tree created by the browser?

Answer 1

Great question. The DOM tree is essentially a tree containing all of your HTML elements (nodes), while the rendering tree is the culmination of the DOM and CSSOM trees. A render tree is one that actually displays on the page. Hope this helps! I wrote an article about it, check it out.

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

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

Answer 2

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

• What Every Frontend Developer Should Know About Web Page Rendering

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

• How browsers work: behind the scenes of modern web browsers

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

• Design, layout and paint rendering.

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

Hope to help for you!

Answer 3

The rendering tree is created by combining the DOM tree (Made from HTML parsing) and CSSOM (Made from the CSS tree parsing specific to the document).

The rendering tree contains only nodes that will be visible on the screen, i.e. if the mapping for any of the node is marked as none , then it will not be part of the render tree.

Then, the rendering tree is transferred to the layout phase and, ultimately, to the drawing phase, which displays the actual pixels on the screen, and the content is displayed to you.

To answer your question: both the tree tree and the render tree are created only by the browser, and yes, the render tree is created from the dom tree, as described above.