Browser rendering
Disclaimer
This article is originally based on my understanding of this concept. No guarantee on the accuracy.😅
Few key points:
- The parsing and creation of DOM tree and CSSOM tree is independent.
- The render tree can only be created when both CSSOM and DOM tree are ready.
The sync < script > tag would block the building of DOM tree, because:
- the Javscript has to wait the CSSOM tree to be built since it may need to manuplate or get information about the sytle. And the DOM tree has to stopped since it not sure if the js would interact with the DOM tree.
- So the CSSOM tree keeps building. When the CSSDOM tree finishes, the browser starts to parse js and execute it.
- If the script is trying to manipulate any dom element that hasn’t be created, it would fail. So normally the script tag was put at the end of the body tag.
- Then the DOM tree re-start to build.
- The mordern browser allows the rendering to perform bits by bits.
To shorten the time before the first-screen-rendering, it’s better to make the scirpt tag
asyncNow the parsing of CSS and html can again performs parallelly.
