Browser load Rendering page process parsing

The browser's working mechanism, in a nutshell, is the process of communicating between a Web browser and a Web server over an HTTP protocol. Therefore, the handshake between C/S protocol is the HTTP protocol. The following is the approximate process before the browser is received to begin rendering:

From the browser address bar to start the request link, the browser through DNS resolution to the IP address of the domain name map, after successful browser to connect to this IP address, after the successful connection, the browser side will request header information through the HTTP protocol to this IP address server initiated the request, The server waits for processing after receiving the request, and finally sends back the response to the browser, at which point the browser receives the text/html type code from the server under the HTTP protocol, the browser starts to display the HTML, gets the embedded resource address in it, and then the browser initiates the request to fetch the resources. and displayed in the browser's HTML.

The tool that is closest to us and can show a complete communication process directly is Firebug, see:

The yellow tips floating layer tells us "colorbox.html" the length of each link from the initiation request to the closing of the connection (domain name resolution--Establish connection---Initiate request, wait for response, receive data), click the request, You can get headers information for HTTP, which contains the response header information and the request header information, such as:

Response header Information http/1.1 304 not Modified date:wed, Geneva 08:20:06 GMT server:apache/2.2.4 (Win32) php/5.2.1 connection:k Eep-alive keep-alive:timeout=5, max=100 Etag: "1e483-1324-a86f5621"

Request header information get/docs/eva/api/colorbox.html http/1.1 Host:ued.com user-agent:mozilla/5.0 (Windows; U Windows NT 6.1; ZH-CN; rv:1.9.2.13) gecko/20101203 firefox/3.6.13 accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language:zh-cn,zh;q=0.5 accept-encoding:gzip,deflate accept-charset:gb2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: Connection:keep-alive Referer:http://ued.com/docs/if-modified-since:thu, 10:14:07 GMT If-None-Match: " 1e483-1324-a86f5621 "Cache-control:max-age=0

In addition, Ajax asynchronous requests also follow the HTTP protocol, which is similar in principle.

Browser loads the order in which HTML page content is displayed

We often see the browser loading a page, some content is displayed first, and some content after the display. So what is the order in which the browser loading shows HTML?

In fact, the order in which the browser loads the display HTML is in the following order:
1, IE download order is from top to bottom, the order of rendering is also from top to bottom, download and rendering is at the same time.
2. When rendering to a part of the page, all the above parts have been downloaded (not that all associated elements have been downloaded).
3, if the semantic interpretation of the tag embedded file (JS script, CSS Sword knock-out the download process of the pirate E will be enabled to download a separate connection.
4, and after the download to parse, parsing process, stop all the page down the download of elements.
5. After the download is complete, the stylesheet will be parsed with all of the previously downloaded stylesheets, and once the parsing is complete, all previous elements (including previously rendered) will be rendered again.
6, JS, CSS if there is a redefinition, after the definition function will overwrite the pre-defined function.

Firefox handles download and render orders in much the same way, except for nuances, such as: IFrame rendering

If your Web page is larger, you want some content to appear first, stick to the browser, then you can follow the above rules reasonable layout of your page, to achieve the intended purpose.

JS's Loading
Cannot download and analyze in parallel (blocking download)
When JS is quoted, the browser sends 1 jsrequest and waits for the request to return. Because the browser needs 1 stable DOM tree structure, and JS is very likely to have code directly changed the DOM tree structure, such as using document.write or appendchild, Even the direct use of the location.href to jump, the browser in order to prevent the occurrence of JS modified DOM tree, the need to rebuild the DOM tree, so it will block the other download and rendering.

To more clearly display the loading order of page elements, a program is written, and the program delays each element in the page by 10 seconds.

The location of the program is shown in the attachment.

First look at the testhtmlorder.aspx page and use Httpwatcher to detect the loading of the page elements.

You can see the loading order from the diagram below.

IE first loaded the main page testhtmlorder.aspx,

After downloading the homepage, the page first shows the words "Red Sword spirit" and "Blue Sword spirit", but it shows only black font and no style, because the style has not been downloaded.

The label on the next page is the JS tag, which belongs to the embedded file, so IE needs to download it. There are two files, although IE can establish two links with webserver at this time, but instead of using two connections, a connection is used, and then another file is downloaded after the download is complete.

The reason is because JS contains a syntax definition, the function in the second file may use the first file inside the variables and functions, ie no way to judge, or need a very time-consuming judgment, to determine the order of the file download. And in the explanation aspect, ie to js file is to download one, explain one (can execute file testjsorder2.aspx). If you download the second file first, an explanation error will occur. So it is necessary for the developer to place the JS files in order, and then the IE will be downloaded in sequence to explain. The following function overrides the previous function definition

After the download is complete, we see HELLOWORLD,HELLOWORLD2 and start the sequence execution. The style sheet and picture of the font are still not downloaded.

When the helloworld,helloworld2 executes the procedure, the page is stuck at the breakpoint (the alert part) of the function execution. IE does not download the CSS file at this time. This indicates that the execution of the JS function will block the download of IE.

Next we see the download of the CSS file is also using a connection, is also a serial download. The reason why the serial download and JS serial download is the same reason.

In the two CSS file download process, we see "Red Sword", "Blue sword" turn into red and blue, the color of the conversion time difference between 10 seconds, indicating that the style file and JS file is downloaded after a parse one.

Now go to testcssorder.aspx to see, you can see the beginning of the "Red Sword", "Red Strong Sword", shown in red, after 10 seconds, "Blue Sword" is shown in blue, after 10 seconds, "Red Strong sword" font has become thicker, and "Red strong Spirit 2" began to appear. At the beginning of the "Red Sword", "Red Strong sword" display red, the third style has not been downloaded, at this time, ie use has been downloaded to the style of the above elements rendered once, although the "Red Sword", "Red strong sword" style definition is different, but the display effect is the same. After the third file is downloaded, ie again to "Red strong sword" rendered again, at this time it becomes bold, the above all the files loaded and rendered after the completion, began to render the following label "Red Strong Sword Spirit 2"

There is a need to prove that: when the IE uses the style to render the label, is not the other page elements to stop the download? I wanted to detect it by increasing the rendering time (the number of label elements was increased by using the filter), but no validation was successful. Just infer the CSS rendering from the execution of the JS function.

Next see is the picture file download, at this time see is two pictures at the same time to start the download, and after the download is complete, immediately begin to display on the page, until all the pictures downloaded to complete.

Note: A way to test the time that a file spends on a network transmission.

First, you need to understand the significance of detecting the W ait value: Wait = time spent by the server + network time

The server spends time we can use Thread.Sleep (10000), to let it rest 10s,

Like this:

This can probably be calculated as 10.002-10 = 0.002 seconds, which is probably the time spent on the network.

Source: Browser Load Rendering page process parsing

Browser load Rendering page process parsing