What does the browser do?

The HTTP protocol is based on the request response mode. The client sends a request to the server. The request header contains the request method, URI, Protocol version, and request modifier,
Message results of MIME-like client information and content. The server responds with a status action. The corresponding content includes the version of the Message Protocol,
The server information, entity metadata, and possible entity content are added to the success or error code.

Cache:

When the browser requests a URL for the first time, the server returns status 200,
At the same time, some Headers sets are returned to the browser, such as set-cookie, Last-Mondified, and Etag.
The following describes Last-Mondified and Etag, that is, browser cache.

HTTP/1.x 200 OK
Server: Microsoft-Microsoft IIS/7.5
Last-Modified: Thu, 31 Dec 2009 09:29:09 GMT
Etag: "e46de5b4fb89ca1: 0"
Expires: Thu, 07 Jan 2010 00:00:00 GMT

Last-Mondified: Last modification time
Etag: the unique identifier of the resource status (the etag of each resource is different, such as img, js, css ....)
Expires: Specify the expiration time of the resource in the browser cache (which must be set on the server)

After receiving the server information, the browser caches the resource in the local directory and saves the preceding information of the file.
If set-cookie exists and the browser does not disable the cookie, the cookie information will be saved. When the cookie expiration time is later than the current time, the browser will save the cookie on the local hard disk.
The next request will be sent to the server together with the header. Of course, the condition is the same domain, and the path constraints are consistent.

In the second request, according to the HTTP protocol, the browser will send the If-Modified-Since and If-None-Match headers to the server,
These two headers are actually the Last-Modified and Etag returned by the server during the first request. These two headers are sent to the server asking whether the resource has been Modified within the time.
If the resource is Not modified, the server will directly return the HTTP 304 (Not Changed.) status code. The content is blank and the resource will Not be downloaded. the browser will automatically read the resource from the cache directory.

Using Last-Modified/Etag can reduce transmission costs, but does not reduce http requests.
Test results (from the Internet ):

If the header packet about the expiration time (Expires) is added to the file, the browser will first check the file in the cache. If it does not expire, it will directly use the file in the cache, therefore, http requests are not sent.
Test results (from the Internet ):

The preceding descriptions only show some common browser cache statuses. In actual applications, such as page Jump (click the Page Link to jump, window. open, press enter in the address bar, and refresh the page). There are some differences.

Normal page Jump includes Link click jump, use js script to open the new page (window. open), iframe
The first request server returns 200 and the Last-Modified/Etag of the resource,
When the second request is sent, the browser sends the Last received Last-Modified/Etag, and the server returns 304 (HTTP/1.x 304 Not Modified) directly)
If Expires is set and does not expire, the browser reads the file directly from the cache directory without sending a request to the server.
F5 refresh
The difference between a request and a normal request is that even if the resource is set to Expires and has not expired, the browser sends the corresponding request and determines whether to download the resource based on the Status returned by the server.
When Ctrl + F5 is refreshed, the server returns 200 (all resources are downloaded again), the same as if there is no cache validity period ).

After understanding the above principles, we can reasonably set the header of the web server to greatly improve the performance.
Take iis7 as an example. iis6 settings are similar (iis Management -- httpheaders tab -- select allow content expiration ).

For example, the website has an images folder containing many large images, but these images will not be changed within 1 day.
Then, we can set the expiration time for this folder.
SwitchTheFunction View -- select http Response Headers in the iis category -- set common headers -- expire web Content
Test:
Environment: Live Http Headers + Firefox 3.5.6
The html file contains five images in this folder.
The first request sent 6 http requests and 6 downloads (document + 5 images)
In the second request, only one http request is sent and one download is performed (document, and image is read directly from the browser cache)
If F5 is refreshed, six http requests are sent. For five images, the server returns HTTP/1.x 304 Not Modified, so the browser does Not download the image. A total of one download is made.

Download resource sequence
The main document is of course the first download, followed
IE6 downloads external resources according to the Document Stream sequence defined in html, from top to bottom.
FF is slightly different. FF will give priority to downloading js or css, while image resources will be delayed until the downloading.
(IE7 and IE8 are also tested to download js or css first, and download of other resources is postponed)

Test results:
Documentation:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Link href = "main.css" rel = "Stylesheet"/>
<Script type = "text/javascript" src = "/AreaCounter. js"> </script>
</HEAD>
<BODY>
<Div>

<Link href = "index090703.css" rel = "Stylesheet"/>

<Script language = 'javascript 'Type = 'text/JavaScript 'src = '/csdn_ggmm.js'> </script>
</Div>
</BODY>
</HTML>
IE7/IE8/FF download sequence:

Rendering or parsing (non-DOM)

Special tests were conducted on js running and page loading events. Open the test page in Firefox:

(The following test data is from the Internet)

[22:13:32. 947] HTML Start
[22:13:32. 947] normal inline script run time
[22:13:34. 904] normal external script run time
[22:13:35. 775] [body] normal external script run time
[22:13:35. 789] [body end] normal external script run time
[22:13:35. 789] HTML End
[22:13:35. 791] deferred inline script run time
[22:13:35. 791] deferred external script run time
[22:13:35. 793] DOMContentLoaded
[22:13:38. 144] images [0] onload
[22:13:38. 328] images [1] onload
[22:13:39. 105] images [2] onload
[22:13:39. 105] images [3] onload
[22:13:39. 106] window. onload

Obviously, JS runs strictly in the order in the Document Stream. The deferred script will run at the end (Note: Firefox 3.5 supports defer and is perfectly supported ).

Let's take a look at IE8. The results are as follows:

[22:33:56. 806] HTML Start
[22:33:56. 826] normal inline script run time
[22:33:57. 786] normal external script run time
[22:33:57. 812] deferred inline script run time
[22:33:57. 816] document. readyState = interactive
[22:33:57. 934] [body] normal external script run time
[22:33:58. 310] [body end] normal external script run time
[22:33:58. 310] HTML End
[22:33:58. 346] deferred external script run time
[22:33:58. 346] images [0]. readyState = loading
[22:33:58. 346] images [0]. readyState = complete
[22:33:58. 346] images [0] onload
[22:33:58. 361] doScroll
[22:33:58. 451] images [1]. readyState = loading
[22:33:58. 479] images [1]. readyState = complete
[22:33:58. 479] images [1] onload
[22:33:58. 794] images [2]. readyState = loading
[22:33:58. 854] images [2]. readyState = complete
[22:33:58. 854] images [2] onload
[22:33:58. 876] images [3]. readyState = loading
[22:33:58. 876] images [3]. readyState = complete
[22:33:58. 876] images [3] onload
[22:33:58. 887] document. readyState = complete
[22:33:58. 888] window. onload

It can be seen that in IE8, defer is only valid for the external script and invalid for the inline script.

Css download and rendering are performed almost simultaneously. That is, after the download is completed, it will be rendered to the page immediately.
When a script is downloaded, it will be parsed and run immediately. The script runs strictly in the order in the document stream. The deferred script runs after the normal script runs,
Therefore, pay special attention to the js script placement sequence. If the second external script directly calls the global variable in the first external script, a script error will occur.
Note: When a script is running, download of all resources under the script will be suspended (because the script may change the Document Stream or even jump to the page, the browser's suspension policy is reasonable ).

DOM rendering depends on the rendering engine of the browser.
Here we can learn about the rendering engine of various browsers: http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php

Ps: defer is a very useful thing. When a script is marked as defer = true, the browser does not execute the script immediately after the script is downloaded, download and parse other resources.
By default, defer is false, so do not use global variables in the js block or external js file that identifies defer.
Example
<Script type = "text/javascript">
Alert ();

</Script>
<Script type = "text/javascript">
Var a = 3
</Script>

This script will report an undefined error of a. If you add defer = true to the first script block, it will run normally. Therefore, adding defer is a bit similar to window. onload, but it is more flexible than onload!
<Script type = "text/javascript" defer> // equivalent to defer = true
Alert ();
</Script>