Comparison
Document Object ModelvsRender tree
Document Object Model
you open the elements panel and the tree you see is not the HTML you wrote, because scripts changed it.
The live tree of objects the browser builds from parsed HTML and exposes to JavaScript. It is the source of truth for what is on the page, not the HTML file, which is why 'view source' and the elements panel disagree on any page with scripts. Every DOM node carries substantial memory and every mutation can invalidate layout, so the tree's size is a performance number and not just a structural detail.
Full entry →Render tree
the element is in the DOM and has styles, but it never appears, because it was never given a box.
The combination of the DOM and the computed styles, containing only the nodes that will actually be drawn. Nodes with `display: none`, and everything inside `head`, are absent from it entirely — which is the mechanical difference between hiding something and making it invisible. Layout and paint operate on this tree, not on the DOM, so its size rather than the DOM's is what those stages pay for.
Full entry →