Recently, I am learning the performance optimization of the front-end. It is necessary to understand the rendering process of the page in order to prescribe the right medicine and find out the bottleneck of performance. The following are some things I have seen, and I will share them with you.
Reference: Understanding the renderer
The rendering of the page has the following characteristics :•Single-threaded event polling
• Clearly defined, continuous, and orderly operation (HTML5)
•Partition and building DOM trees
• Request resources and preload
•Build rendering trees and draw pages
Specifically :When we get the corresponding bytes of HTML from the network, the DOM tree begins to be built. The thread that updates the UI is responsible for the browser. The build of the DOM tree is blocked when:
•HTML response stream is blocked in the network
•There are unloaded scripts
•The script node was encountered, but there was still an unloaded style file at this time
The rendering tree is built from the DOM tree and will be blocked by the style file.
Since it is based on single-thread event polling, even if there is no blocking of scripts and styles, the rendering of the page will be blocked when these scripts or styles are parsed, executed and applied.
Some cases where page rendering does not block :•Defined defer attributes and async attributes
•The style file with no matching media type
•No script node or style node is inserted through parser
Here, let’s illustrate this with an example (full code) :Copy the code