Understand the rendering process of HTML page for the performance optimization of learning front end

Time:2021-3-2

Recently, in learning the performance optimization of the front-end, it is necessary to understand the rendering process of the page, so as to find out the bottleneck of the performance. Here are some of the things I’ve seen to share with you.
Reference: understanding the renderer
Page rendering has the following characteristics
· single threaded event polling
· well defined, continuous and orderly operation (HTML5)
· word segmentation and DOM tree construction
Request resources and preload them
Build the rendering tree and draw the page
say concretely
When we get the corresponding byte of HTML from the network, the DOM tree starts to build. The thread that the browser updates the UI is responsible for. The construction of DOM tree will be blocked when:
The response stream of HTML is blocked in the network
There are scripts that have not been loaded completely
The script node was encountered, but there are still style files that have not been loaded completely at this time
The rendering tree is built from the DOM tree and is blocked by style files.
Because it is based on single thread event polling, even if there is no script or style blocking, when these scripts or styles are parsed, executed and applied, the page rendering will be blocked.
Some situations that don’t block page rendering
The definition of the defer attribute and async attribute
No style file with matching media type
No script node or style node is inserted through the parser
Now, let’s illustrate (complete code) with an example

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
  <div>Hi there!</div>
  <script>
    document.write(‘<script src=”other.js”></scr’ + ‘ipt>’);
  </script>
  <div>Hi again!</div>
  <script src=”last.js”></script>
</body>
</html>

The code is easy to understand. If it is opened in the browser, the desired page will be displayed immediately. Next, let’s use slow motion playback to see how it is rendered.

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
<div>Hi there!</div>
<script>…

First, the parser encountered example.css And download it from the network. The process of downloading the stylesheet is time-consuming, but the parser is not blocked and continues to parse. Next, the parser encounters the script tag, but the execution of the script is blocked because the style file is not loaded. The parser is blocked and cannot continue parsing.

The rendering tree will also be blocked by style files, so no browser will render the page, in other words, if the example.css The file can’t be downloaded. Hi there! Can’t be displayed.
Next, continue…

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
<div>Hi there!</div>
<script>
  document.write(‘<script src=”other.js”></scr’ + ‘ipt>’);
</script>

once example.css When the file is loaded, the rendering tree is built.
After the inline script is executed, the parser is immediately executed other.js It’s blocked. Once the parser is blocked, the browser will receive a drawing request, and “Hi there!” will be displayed on the page.
When other.js After loading, the parser continues to parse down…

Copy code

The code is as follows:

<html>
<body>
<link rel=”stylesheet” href=”example.css”>
  <div>Hi there!</div>
  <script>
    document.write(‘<script src=”other.js”></scr’ + ‘ipt>’);
  </script>
  <div>Hi again!</div>
  <script src=”last.js”></script>

Parser encountered last.js After that, it will be blocked, and then the browser receives another drawing request, “Hi again!” will be displayed on the page. last last.js It will be loaded and executed.
However, in order to slow down the blocking of rendering, modern browsers use speculative loading.

In this case, scripts and style files can seriously block the rendering of the page. The purpose of guessing preloading is to reduce this blocking time. When rendering is blocked, it does the following:
The lightweight HTML (or CSS) scanner continues to scan the document
Search the URLs of resource files that may be used in the future
· download them before the render uses them
However, guessing preload cannot find resource files loaded by JavaScript scripts (such as, document.write ())。

notes: all modern browsers support this approach.
Let’s go back to the example above and guess how preloading works.

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
  <div>Hi there!</div>
  <script>…

The parser returns example.css , and get it from the network. The parser is not blocked and continues to parse. When an inline script node is encountered, it is blocked. Because the style file is not loaded, the execution of the script is blocked. The rendering tree is also blocked by the style file, so the browser doesn’t receive the rendering request and can’t see anything. So far, it’s the same way as the one just mentioned. But then it changed.

The specific loader continues to “read” the document and finds that last.js And load it. next:

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
  <div>Hi there!</div>
  <script>
    document.write(‘<script src=”other.js”></scr’ + ‘ipt>’);
  </script>

once example.css When the file is loaded, the rendering tree is built, the inline script can be executed, and then the parser is executed other.js It’s blocked. After the parser is blocked, the browser will receive the first rendering request, and “Hi there!” will be realized on the page. This step is consistent with the situation just now. then:

Copy code

The code is as follows:

<html>
<body>
  <link rel=”stylesheet” href=”example.css”>
  <div>Hi there!</div>
  <script>
    document.write(‘<script src=”other.js”></scr’ + ‘ipt>’);
  </script>
  <div>Hi again!</div>
  <script src=”last.js”></script>

The parser found out last.js But because the preloader has just loaded it and put it in the browser’s cache, so last.js It will be executed immediately. After that, the browser will receive a rendering request, and “Hi again” is also displayed on the page.
Through the comparison of the two situations, I hope you can have a certain understanding of the page rendering, and then do some targeted optimization. good night! (end)^_^