Comparison
CSSOMvsDocument Object Model
CSSOM
the page is blank until the stylesheet finishes downloading, even though the HTML arrived immediately.
The parsed representation of every stylesheet, which the browser must have in full before it can compute any element's styles. Unlike HTML, CSS cannot be applied incrementally: a rule at the bottom of the last stylesheet can override the first, so the browser blocks rendering until it has all of them. That is the whole reason stylesheets are render-blocking and scripts are not by default.
Full entry →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 →