Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how the rendering process of html page is". In daily operation, I believe many people have doubts about the rendering process of html page. The editor has consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how the rendering process of html page is". Next, please follow the editor to study!

When we get the corresponding bytes of HTML from the network, the DOM tree begins to build. It is the responsibility of the thread that the browser updates the UI. The construction of the DOM tree is blocked when the following situations occur:

The response flow of HTML is blocked in the network

There are unloaded scripts

The script node was encountered, but there are still unloaded style files at this time

The render 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, the rendering of the page is blocked when these scripts or styles are parsed, executed, and applied.

Some situations that do not block page rendering:

Of the defined defer property and the async property

There are no style files for matching media types

No script node or style node is inserted through the parser

Let's use an example to illustrate (the complete code):

Copy the code

one

two

three

4 Hi there!

five

6 [xss_clean] ('')

seven

8 Hi again!

nine

ten

eleven

Copy the code

The code is easy to read, and if you open it in a browser, the desired page will be displayed immediately. Next, let's use slow-motion playback to see how it is rendered.

one

two

three

4 Hi there!

5...

First, the parser encounters example.css and downloads it from the network. 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 be parsed further.

Rendering trees will also be blocked by style files, so no browser will render the page at this time, in other words, if the example.css file cannot be downloaded, Hi there! It can't be displayed.

Next, go on.

Copy the code

Hi there!

[xss_clean] ('')

Copy the code

Once the example.css file is loaded, the render tree is built.

After the inline script is executed, the parser is immediately blocked by other.js. Once the parser is blocked, the browser receives a drawing request, "Hi there!" It will be displayed on the page.

When the other.js is loaded, the parser continues to parse downwards.

Copy the code

one

two

three

4 Hi there!

five

6 [xss_clean] ('')

seven

8 Hi again!

nine

Copy the code

The parser is blocked when it encounters last.js, and the browser receives another drawing request, "Hi again!" It's displayed on the page. Finally, the last.js will be loaded and executed.

However, to slow down the blocking of rendering, modern browsers use guessing preloading (speculative loading).

In this case, scripts and style files can seriously block the rendering of the page. Guess that the purpose of preloading is to reduce this blocking time. When the rendering is blocked, it does the following:

Lightweight HTML (or CSS) scanners (scanner) continue to scan documents

Find the url of resource files that may be available in the future

Download them before the renderer uses them

However, guessing that preloading cannot find resource files loaded by javascript scripts (for example, [xss_clean] ()).

Note: all "modern" browsers support this approach. This sentence is open to question, please see my next essay (being sorted out. ).

Go back to the above example and guess how preloading works.

one

two

three

4 Hi there!

5...

The parser returns the example.css and gets it from the network. The parser is not blocked and continues parsing. When it encounters an inline script node, it is blocked, and the execution of the script is blocked because the style file is not loaded. The render tree is also blocked by style files, so the browser does not receive a rendering request and cannot see anything. So far, it's the same as the one just mentioned. But then something changed.

The preloader (Speculative loader) continues to "read" the document, finds last.js and tries to load it. (note: at this point, if example.css is not loaded, last.js will not be loaded and will remain in the pending state.) Next:

Copy the code

one

two

three

4 Hi there!

five

6 [xss_clean] ('')

seven

Copy the code

Once the example.css file is loaded, the render tree is built, the inline script can be executed, and then the parser is blocked by other.js. After the parser is blocked, the browser receives the first rendering request, "Hi there!" Will be reality on the page. This step is consistent with the situation just now. Then:

Copy the code

one

two

three

4 Hi there!

five

6 [xss_clean] ('')

seven

8 Hi again!

nine

Copy the code

The parser found last.js, but because the preloader just loaded it and put it in the browser's cache, last.js is executed immediately. After that, the browser will receive the rendering request "Hi again" is also displayed on the page.

At this point, the study of "what is the rendering process of html pages" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.