HTML deep Open a Web page what the hell did it Do (a) __html

All of us randomly give a very simple Web page, the basic structure is as follows:

Then we run it in chrome and then pull up the console and select our Timeline item (it shows a few colors, here's a mention, blue for HTML parsing, yellow for the trigger or run JavaScript, purple for rendering, Green represents the drawing, in fact, this is also described in the Timeline item, I hope you can learn to use Timeline to do some performance optimization work, and then you will see the following figure:

And then we see the main area of the second window, and the pulley that we roll the mouse over in this area makes it zoom in and out, and then we look at the process of loading the page and what it does in the middle.

The first is to trigger the Beforeunload event before the Web page loads.

Then it's sendrequest to get the server-side index.html files.

The index.html file is then received, followed by the triggering of the Pagehide,visibilitychange,webkitvisibilitychange,unload four events, followed by triggering the ReadyStateChange event, and then the browser begins to read After reading our index.html file, the browser starts parsing the HTML file.

Then we found that when parsing HTML, requests such as SRC and href would be emitted during parsing of HTML. The red box in the picture is our script and link requirements of the JS and CSS files, they will be parsing HTML in the process of sending files to the server request.

The picture is just send request (test1.js), send request (test2.js), send request (test3.js), send request (nodejss.js), send request ( Test4.js), this is something we know, parsing HTML is top-down.

And then it happened. Received Test1.js and Test2.js, (Receive Response (test1.js), receive Response (test1.js)), what we want to be clear here is that we sent the message requesting the file, And then I got the file that the server sent over, and we parse the file does not conflict, that is, we parse the HTML file and received the file is parallel, does not conflict, or that the two yards to a code, parsing HTML can accept the server to send files.

Although they do not conflict with the file, but for script, if you do not use defer or async, you must know one thing, that is sequential execution and blocking rendering. Looking at the diagram below, you'll see that when the browser finishes parsing HTML, the browser starts building the DOM node, starting with the HTML header to build the DOM node, and when executed to the script, wait for our script to come from the server, if it comes over, The browser will read the received file.

When the browser finishes reading the Test1.js file, the browser compiles the program directly and then runs it, while the browser can not do anything other than the file requesting the server in parallel, and cannot proceed until the JavaScript code has been executed before it can go down. When a script-wrapped JavaScript file is executed, the Load event is triggered, telling the browser to finish, and then the browser goes down.

However, another script will wait, knowing that the file is receiving the same as the above processing, and then proceeding down until the DOM node is constructed.

When you finish constructing the DOM node, the ReadyStateChange event is triggered. Then it's called Document.onreadystatechange, runs out, then triggers the domcontentloaded, so our onreadystatechange executes in the order before domcontentloaded, but the DOM node is now Finished.

Then the interface style is rendered again.

Then it triggers the ReadyStateChange event and calls Document.onreadystatechange (which is why we run it two times when Document.onreadystatechange writes), which triggers the Load event and then Use Window.onload, then the event that triggers the pageshow to display the final page.

This is the whole process of opening a Web page.