Browser page load parsing rendering mechanism (i)

Mark Zhq[2].

Preface: First of all, this title is not very familiar to me, here quoted some good technical text content, share some of my understanding, if there is a wrong looking comments in the face, to encourage.

One: Why to understand the browser rendering page and loading page mechanism, mainly is the performance optimization.

• To understand how the browser load , we can refer to external style files, external JS, put them in the appropriate location, so that the browser as fast as possible to load the file completed.
• To understand how the browser is parsed , we can choose the best way to improve the resolution rate of the browser when building the DOM structure and organizing CSS selectors.
• Understand how the browser renders , understand the process of rendering, we set the element properties, writing JS file, you can reduce the "redraw" "re-layout" consumption.

These three processes are not completely independent at the time of actual implementation, but will have a crossover. Will cause one side to load, while parsing, while rendering the work phenomenon.

Second: What happens to the user's access to the webpage.

1. The user visits the webpage, the DNS server (domain name resolution System) will find the corresponding IP address according to the domain name provided by the user, and when found, the system will send an HTTP request to the network server corresponding to the IP address.
2. The network server resolves the request and sends a request to the database server.
3. The database server returns the requested resource to the network server, the network server parses the data, and generates an HTML file that is placed in the HTTP response and returned to the browser.
4. The browser resolves the HTTP response.
5. After the browser resolves the HTTP response, it is necessary to download the HTML file, as well as the external reference files contained within the HTML file, and the pictures or multimedia files involved in the file. (This goes to the main topic, which is the third big point below)

1~4 some of the steps in the HTTP protocol to access the server side of the problem: if the network server cannot get the resource file returned by the database server (HTTP response 404), or because of concurrency reasons temporarily unable to process the user's HTTP request (HTTP response 500).

Three: Browser rendering page and parsing loading page mechanism.

A. loading , that is, the process of acquiring resource files, different browsers, and their different versions when implementing this process, there will be different implementations (the resources are blocking each other and can be tested with timeline). Here, let's say the browser's 5 resident threads:

1. Browser GUI render thread
2. JavaScript engine thread
3. Browser Timer trigger thread (setTimeout)
4. Browser Event Trigger Thread
5. Browser HTTP asynchronous request thread (. jpg <link/> Such requests)

　　Note: modern browsers exist prefetch optimization, the browser will open the thread, pre-download JS, CSS files, it should be noted that the pre-loading JS does not change the DOM structure, he left this work to the main load.

　　Note: this also involves blocking phenomena, when the JS engine thread (the second) is in progress, will suspend all other threads, this time 3, 4, 5 These three types of threads will also produce different asynchronous events, because the JavaScript engine thread is a single thread, so the code is first pressed to the queue, In the first-in-order operation, the event handler function, the Timer function will also be pressed in the queue, constantly take out the event from the team head, this is called: Javascript-event-loop. The simple point is that the 1,3,4,5 will hang when the second thread is in progress, such as when the Click event is triggered, even if the previous JS has been loaded and the Click event is pressed into the queue, where the second thread is completed before the Click event is executed.

　　Load Order:

1. Browser parsing HTTP response download HTML files are loaded "from top to bottom" and parsed and rendered during loading. When a top-down load encounters a resource such as a picture or video, it enters the 5th thread, which is an asynchronous request and does not affect the loading of the HTML document.
2. An external CSS file was encountered during the loading process, and a request was made by the browser to get the CSS file. This is also the 5th thread, where CSS parsing generates a rule tree, which will be updated later.
3. When the document loading process encountered a JS file, the HTML document will suspend rendering (load resolution rendering synchronization) of the thread, not only to wait for the document JS file loading complete, but also wait for the resolution to complete, before you can restore the HTML document rendering thread.

Reason: JS has the possibility to modify the DOM, the most classic document.write, which means that before the completion of JS execution, all subsequent downloads of resources may not be necessary, which is the root cause of JS blocking the subsequent download of resources.
Method: The external reference JS file can be placed in front of </body>.

4. CSS may affect the execution of JS to cause blocking.

Reason: such as js inside var width = $ (' #id '). width (); Here JS before the execution, the browser must ensure that the previous CSS files have been downloaded and resolved (the following will not affect), which is the CSS block subsequent JS root cause. When the JS file does not need to rely on CSS files, you can put the JS file in front of the head CSS.

5. Pre-load the Web page and use your free time to load the page's subsequent pages in advance.

<link rel= "prefetch" href= "/http" >

6. Add the Defer property to the JS script, which does not block subsequent rendering of the DOM. But because this defer is only IE dedicated, so generally used relatively little. Our standard HTML5 also adds an asynchronous loading JavaScript property: Async, whatever the value you assign to it, starts loading the JS file asynchronously whenever it appears. However, async asynchronous loading has a serious problem, that is, it faithfully practice the "load immediately after" the military, so, although it does not block the page rendering, but you do not control the order and timing of his execution.

<script defer= "true" src= "Javascript.js" type= "Text/javascript"/>

Write so much first, brain volume emergency! Most of this was tested by myself. Follow-up will also write down the understanding of parsing and rendering.

Browser page load parsing rendering mechanism (i)