Policies for loading external page resources by browsers

This conclusion comes from an optimization request. At first, the loading of a page was very slow and the load event could not be triggered, therefore, we hope that we can optimize the external resources of the page by dividing static files into domain names, and trigger the load event as early as possible.

So I checked the source code of the page and sorted out the external resources. Based on the following two concepts, I drew a speculative waterfall diagram:

1. the browser can only concurrently send two HTTP requests to the same domain-it has been widely used on the Internet for a long time.
2. Loading JavaScript files will block loading of other resources in the browser-it has been widely used on the Internet for a long time.

However, when I saw the actual waterfall chart in various browsers, I knew that I had made another simple mistake: too much trust in the so-called authority and the voice of the masses, without testing the correctness of the theory through practice earlier ......

This article uses several popular browsers to analyze the loading process of external resources on the same page, and speculate on the strategies and features of loading external resources on each browser, finally, we will give some comparisons and conclusions.

Test example

The structure of the test page is as follows:

• Head
  • 1. CSS + 1.js
• Body
  • 1. jpg + 2.jpg + 2.js + 2.css + 3.jpg + 4.jpg + 3.css + 3.js + 5.jpg + 6.jpg

A total of 12 external resources, plus the page itself, a complete load of a total of 13 http get requests.

For each external resource, the server will first sleep for 5 seconds, and then return the corresponding content to facilitate viewing the loading process of the entire external resource.

The tested browser is as follows:

• IE6
• IE8
• Firefox3.6
• Firefox4.0 beta12
• Chrome 8
• Opera 11

IE6

The waterfall chart of IE6 is very traditional and has the following characteristics:

• Each resource is loaded in the Order in HTML.
• JavaScript files block the loading of all subsequent resources.
• The maximum number of concurrent HTTP connections is 2.

It can be seen that the two "misunderstandings" on the Internet come from the era when IE6 ruled the browser market. There were too many optimizations for IE6, so we would habitually use these conclusions as the principle.

IE7 (tenfy supplement)

Unlike IE6, IE7 supports more concurrent requests. external resources are loaded sequentially in the same sequence as those in the Dom, and JS loading will block all subsequent requests.

Download of other resources (JS and IMG will be blocked), IE7 will not adjust the order of resource loading, everything will follow the order in which Dom appears, and once JS loading occurs, the subsequent

Other resources will be blocked. IMG that appears before JS can be loaded with JS, but images that appear after JS must wait until JS loading is complete before concurrent download.

IE8

The waterfall chart is different from IE6 and has the following features:

• The maximum number of concurrent HTTP connections is 6.
• JavaScript files do not block loading of other resources, or even multiple JavaScript files can be loaded together, And the execution sequence is ensured.
• Analyzes the HTML structure and preferentially downloads external resources defined by scripts and link labels.

Firefox3.6

Similar to IE8:

• The maximum number of concurrent HTTP connections is 6 (which can be modified in about: config ).

(# About: config
Network. http. Max-connections: 30
Network. http. Max-Connections-per-server: 15
Network. http. Max-persistent-Connections-per-Proxy: 8
Network. http. Max-persistent-Connections-per-server: 6
)

• JavaScript files do not block loading of other resources. Multiple JavaScript files can be loaded together.
• Analyzes the HTML structure and preferentially downloads external resources defined by scripts and link labels.

Firefox4 beta12

I don't know whether it is because of the different design concepts, or because the beta version did not take care of this part, firefox4 degrades. The difference between firefox3.6 and firefox3.6 is mainly reflected in the processing of resource types, firefox4 does not strictly give priority to downloading external resources defined by scripts and link tags, but loads them according to the sequence in the HTML structure.

Chrome8

Chrome's built-in tools do not clearly indicate the start time of each request. Therefore, the fiddler waterfall diagram is used. From the diagram, we can see that Chrome is also a maverick, its features include:

• The maximum number of concurrent HTTP connections is 6.
• The head resources are downloaded separately and the loading of other resources in the body is blocked.
• The script and link tag resources are preferentially loaded.

Opera11

Complain first. Dragonfly is not very useful ...... The resource loading feature of opera is also quite special, and it is difficult to see the rule. It can only be summarized as follows:

• The maximum number of concurrent HTTP connections is 5 (the original version is 4 on the Internet ).After being corrected by a netizen, the maximum number of concurrent HTTP connections of opera is 16 by default.opera:config - Performance - Max Connections ServerView and modify.
• Loading of JavaScript files will block loading of external resources defined by other scripts and link labels. However, it does not block loading of images and other resources, such as 3.js.
• Resource priority will be optimized to a certain extent, but because JavaScript files need to prevent loading of some subsequent resources, and in order to make full use of the maximum number of HTTP connections, therefore, you cannot strictly load all the script and link tag-defined resources first. As a result, various types of resources on the waterfall chart are interspersed with each other, which is difficult to find.

Summary

• If you leave IE6 alone, unless there are a lot of pages with external resources such as online albums, there is no need to pursue domain name Optimization for static resources.
• When optimizing static resource domain name separation for IE6, you must strictly pay attention to the blocking of subsequent resources by JavaScript files. After precise calculation and design, ensure that the resources are perfectly stored by domain name, to provide the maximum degree of parallelism.
• Since chrome loads head resources independently, can I move the resources to the body if the head uses less than 6 HTTP concurrent requests? The resources in the body may cause other problems, so be careful.
• Opera's behavior is weird. It seems that it has proactively designed a very troublesome algorithm, but considering its share, let's put it aside first ...... Opera, the fastest browser, is so clumsy when loading JavaScript files ......
• The behavior of firefox4 beta12 is incomprehensible. It seems that the RC version still has this problem to be tracked. If so, you can check Mozilla to report a problem.

This conclusion comes from an optimization request. At first, the loading of a page was very slow and the load event could not be triggered, therefore, we hope that we can optimize the external resources of the page by dividing static files into domain names, and trigger the load event as early as possible.

So I checked the source code of the page and sorted out the external resources. Based on the following two concepts, I drew a speculative waterfall diagram:

1. the browser can only concurrently send two HTTP requests to the same domain-it has been widely used on the Internet for a long time.
2. Loading JavaScript files will block loading of other resources in the browser-it has been widely used on the Internet for a long time.

However, when I saw the actual waterfall chart in various browsers, I knew that I had made another simple mistake: too much trust in the so-called authority and the voice of the masses, without testing the correctness of the theory through practice earlier ......

This article uses several popular browsers to analyze the loading process of external resources on the same page, and speculate on the strategies and features of loading external resources on each browser, finally, we will give some comparisons and conclusions.

Test example

The structure of the test page is as follows:

• Head
  • 1. CSS + 1.js
• Body
  • 1. jpg + 2.jpg + 2.js + 2.css + 3.jpg + 4.jpg + 3.css + 3.js + 5.jpg + 6.jpg

A total of 12 external resources, plus the page itself, a complete load of a total of 13 http get requests.

For each external resource, the server will first sleep for 5 seconds, and then return the corresponding content to facilitate viewing the loading process of the entire external resource.

The tested browser is as follows:

• IE6
• IE8
• Firefox3.6
• Firefox4.0 beta12
• Chrome 8
• Opera 11

IE6

The waterfall chart of IE6 is very traditional and has the following characteristics:

• Each resource is loaded in the Order in HTML.
• JavaScript files block the loading of all subsequent resources.
• The maximum number of concurrent HTTP connections is 2.

It can be seen that the two "misunderstandings" on the Internet come from the era when IE6 ruled the browser market. There were too many optimizations for IE6, so we would habitually use these conclusions as the principle.

IE7 (tenfy supplement)

Unlike IE6, IE7 supports more concurrent requests. external resources are loaded sequentially in the same sequence as those in the Dom, and JS loading will block all subsequent requests.

Download of other resources (JS and IMG will be blocked), IE7 will not adjust the order of resource loading, everything will follow the order in which Dom appears, and once JS loading occurs, the subsequent

Other resources will be blocked. IMG that appears before JS can be loaded with JS, but images that appear after JS must wait until JS loading is complete before concurrent download.

IE8

The waterfall chart is different from IE6 and has the following features:

• The maximum number of concurrent HTTP connections is 6.
• JavaScript files do not block loading of other resources, or even multiple JavaScript files can be loaded together, And the execution sequence is ensured.
• Analyzes the HTML structure and preferentially downloads external resources defined by scripts and link labels.

Firefox3.6

Similar to IE8:

• The maximum number of concurrent HTTP connections is 6 (which can be modified in about: config ).

(# About: config
Network. http. Max-connections: 30
Network. http. Max-Connections-per-server: 15
Network. http. Max-persistent-Connections-per-Proxy: 8
Network. http. Max-persistent-Connections-per-server: 6
)

• JavaScript files do not block loading of other resources. Multiple JavaScript files can be loaded together.
• Analyzes the HTML structure and preferentially downloads external resources defined by scripts and link labels.

Firefox4 beta12

I don't know whether it is because of the different design concepts, or because the beta version did not take care of this part, firefox4 degrades. The difference between firefox3.6 and firefox3.6 is mainly reflected in the processing of resource types, firefox4 does not strictly give priority to downloading external resources defined by scripts and link tags, but loads them according to the sequence in the HTML structure.

Chrome8

Chrome's built-in tools do not clearly indicate the start time of each request. Therefore, the fiddler waterfall diagram is used. From the diagram, we can see that Chrome is also a maverick, its features include:

• The maximum number of concurrent HTTP connections is 6.
• The head resources are downloaded separately and the loading of other resources in the body is blocked.
• The script and link tag resources are preferentially loaded.

Opera11

Complain first. Dragonfly is not very useful ...... The resource loading feature of opera is also quite special, and it is difficult to see the rule. It can only be summarized as follows:

• The maximum number of concurrent HTTP connections is 5 (the original version is 4 on the Internet ).After being corrected by a netizen, the maximum number of concurrent HTTP connections of opera is 16 by default.opera:config - Performance - Max Connections ServerView and modify.
• Loading of JavaScript files will block loading of external resources defined by other scripts and link labels. However, it does not block loading of images and other resources, such as 3.js.
• Resource priority will be optimized to a certain extent, but because JavaScript files need to prevent loading of some subsequent resources, and in order to make full use of the maximum number of HTTP connections, therefore, you cannot strictly load all the script and link tag-defined resources first. As a result, various types of resources on the waterfall chart are interspersed with each other, which is difficult to find.

Summary

• If you leave IE6 alone, unless there are a lot of pages with external resources such as online albums, there is no need to pursue domain name Optimization for static resources.
• When optimizing static resource domain name separation for IE6, you must strictly pay attention to the blocking of subsequent resources by JavaScript files. After precise calculation and design, ensure that the resources are perfectly stored by domain name, to provide the maximum degree of parallelism.
• Since chrome loads head resources independently, can I move the resources to the body if the head uses less than 6 HTTP concurrent requests? The resources in the body may cause other problems, so be careful.
• Opera's behavior is weird. It seems that it has proactively designed a very troublesome algorithm, but considering its share, let's put it aside first ...... Opera, the fastest browser, is so clumsy when loading JavaScript files ......
• The behavior of firefox4 beta12 is incomprehensible. It seems that the RC version still has this problem to be tracked. If so, you can check Mozilla to report a problem.