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
- the browser recalculates layout whenever the styles are updated, or the viewport width changes
Once the layout has been calculated, the elements are painted to the screen. Fewer effects will generally mean a faster paint time. Some painting must occur when layout changes, but browsers try to be clever to minimise the amount of repainting required.