First, the browser must parse the HTML code into the Document Object Model. When the parser encounters a script tag, the script is immediately parsed and executed. The script can modify the HTML code via
The browser will immediately try to render the DOM, even if the HTML code has not yet been fully parsed, for example if the full code hasn't yet been received. The browser will update the rendering if the DOM changes or as style information becomes available, for example when the correct font is loaded.
- use the async attribute for script tags so that the browser doesn't have to block until the script has been loaded & executed
- link and preload relevant resources as early as possible so that they can be downloaded in parallel
document.write(), instead perform DOM manipulation once the DOM is ready
- defer non-critical JS code until after the DOM is ready
- ideally, remove any JS code from the critical path, i.e. do not rely on client-side DOM manipulation. That means no React. Instead, use server-side templating. This may not be feasible for very dynamic applications like SPAs.
A note on terminology: “server side rendering” does not mean rendering a DOM with CSS, but serialising a DOM into HTML. So this is more like traditional template engines that are executed on the server, for example as a PHP page. For the client it is irrelevant how HTML is generated: they cannot tell the difference between static HTML files and dynamically rendered templates. In the end the browser just receives HTML code via HTTP which the browser has to parse & render.