Today, let’s review the browser rendering process. The browser renders after the HTTP response is received from the server. Essentially, the browser rendering engine (the browser kernel) parses the HTML, CSS, and JS files in the response and draws the results in the browser window. We learn and understand the content of the browser rendering process to optimize the performance of the web page in the future engineering practice.

Rendering process

The rendering process can be briefly summarized as follows:

  • Parse the HTML document and start building the DOM tree
  • When you encounter a CSS file or style tag in an HTML document, start parsing the CSS content and building the CSSOM tree
  • Merge the DOM tree and the CSSOM tree into a Render tree
  • Calculate the layout according to the rendering tree, so as to get the geometric information of each node, namely reflow.
  • The final step is to draw each node to the screen where the geometric information is calculated

Factors that block rendering: CSS and JS

CSS blocking for rendering

It should be noted that DOM and CSSOM don’t work together to build the rendering tree until CSSOM is fully built, and until then, whether the DOM is built or not, they wait for CSSOM to build, which is CSS blocking. Therefore, in order to improve web performance, we should consider loading CSS resources as soon as possible.

##JS for rendering blocking JS can modify the DOM and CSSOM, and JS is parsed and executed immediately, so JS naturally blocks the rendering process. In other words, the JS engine does nothing more than take over the work of the parallel rendering engine, and the JS engine has higher priority. In order to prevent JS from blocking rendering, we can use async or defer to load JS resources. Both of these modes are asynchronous loading, but async is executed immediately after asynchronous loading, while defer is deferred. Async is selected when the dependency between scripts is not strong, and defer is selected when the dependency is strong. In addition to this approach, it is best to place the JS file at the end of the HTML document to prevent mid-stream DOM changes from blocking rendering.