Recently I am studying performance optimization at the front end. It is necessary to understand the page rendering process so as to remedy the problem and find out the performance bottleneck. page rendering has the following features: if you are interested in the definition, continuity, and Operation Sequence of Single-thread event polling, you can learn about the performance optimization of the front-end recently. It is necessary to understand the page rendering process to suit your needs, find out the performance bottleneck. Here are some of the things I have seen.
Reference: Understanding the renderer
Page rendering has the following features::
• Single-thread event polling
• Well-defined, continuous, and orderly operations (HTML5)
• Word segmentation and DOM tree construction
• Request and pre-load Resources
• Build a rendering tree and draw pages
Specifically:
When we get the corresponding HTML bytes from the network, the DOM tree is built. The browser is responsible for updating the UI. DOM tree construction is blocked in the following situations:
• The HTML response stream is blocked in the network.
• There are unfinished scripts
• A script node is encountered, but there are still unfinished style files
The rendering tree is built from the DOM tree and is blocked by style files.
Because it is based on single-threaded event polling, even if there is no blocking of scripts and styles, when these scripts or styles are parsed, executed, and applied, page rendering will also be blocked.
Some situations that do not block page rendering:
• Defined defer attributes and async attributes
• Style files with no matching media types
• The script node or style node is not inserted through the parser
The following is an example (complete code):
The Code is as follows:
Hi there!
Script
Document. write ('
