Steps to render a page:
- browser reads html text as it's received and the tokeniser converts elements into tokens.
- tokens are parsed to create DOM nodes
- this process is incremental, meaning that the browser can start creating the DOM before it's received all of the html document.
once all of the css has been received, the css text is tokenised, and then these tokens converted into css object nodes, creating the CSSOM (CSS Object Model). unlike html, because later css can affect that defined earlier, css can't begin to be parsed until all of it is available. Thus css downloading blocks rendering Once the DOM and CSSOM are available, the browser puts them together to create the render tree.
- the render tree only describes visible content.
- the render tree enables the browser to calculate where elements should sit on the page, ie the layout