Break free from browser limitations (3)-two connections are not "Parallel" enough"

Reprinted: http://www.cnblogs.com/JeffreyZhao/archive/2007/01/22/Break_the_Browsers_Restrictions_3.html

Before discussing this topic, let's take a look at another issue of script optimization, that is, the difficulty of optimization ". Here, the "difficulty of optimization" refers to the difficulty of modification when a page is optimized. For example, the previousArticleIf you use document. Write to introduce the script, the "optimization difficulty" will be very low-no side effects, no need to modify any otherCode. However, it seems that the effect is not ideal, because it only optimizes the experience in IE, but does not play any role in Firefox.

Unfortunately, I think about almost all the optimization methods, and I have never found any more difficult optimization methods. For other methods, we must modify them elsewhere on the page. The better the optimization effect, the larger the modification volume. For these optimization methods, we must compile appropriate components and encapsulate some logic. This makes it easy to use to a certain extent and reduces the difficulty of optimization.

 

Compare document. Write and defer

So what is the relationship between document. Write and defer? Let me hear about it.

The defer attribute of <script/> is defined in the standard as follows:

When set, this Boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g ., no "document. write "in Javascript) and thus, the user agent can continue parsing and rendering.

The reason why JavaScript cannot be downloaded concurrently is that the browser believes that HTML content may be output in the script. The role of the defer attribute is to tell the browser that no information is output in the script. Sure enough, when we use the defer attribute in IE, the script is not blocked, and the effect is the same as that of document. Write. But it still does not work in Firefox, which is confusing.

The Firefox standard is not detailed yet.

So why did we use document. Write instead of the defer Attribute before? The results are the same, but the defer attribute is obviously more intuitive.

The defer attribute is indeed intuitive and convenient to use. But is the effect really the same? We can try the following example.

Document. Write

<  Html   Xmlns = Http://www.w3.org/1999/xhtml"   >  <  Head   Runat = "Server"  >  <  Title  > Untitled page </  Title  > <  Script   Type = "Text/JavaScript"   Language = "JavaScript"  >  Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Scripts. ashx? A "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Scripts. ashx? B "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Scripts. ashx? C "> <'+'/SCRIPT> '); </  Script  >  </  Head  >  < Body  >  <  Input   Type = "Button"   Value = "Click"   />  <  Script   Type = "Text/JavaScript"   Language = "JavaScript"   SRC ="Scripts. ashx? A"  >  Alert ('Hello World '); </  Script  >  </  Body  >  </  Html  > 

 

 

Then, use the <SCRIPT defer = "Defer"> </SCRIPT> method to introduce it. When you open two pages for comparison, you will find that if you use document. the button will not be displayed or a prompt box will not appear before the script is loaded. If the defer attribute is used, the button will appear immediately and prompt will appear immediately.

This is troublesome. If the elements on the page appear too early, will the user perform operations before the script is loaded? If a script is directly executed on the page (called by alert in the preceding example), can it be executed before the script file is loaded? If either of the above two answers is positive, congratulations. Using the defer attribute will cause errors. The solution to this problem is not easy to find, which greatly increases the difficulty of optimization ".

In addition, Firefox does not support the effect of the defer attribute. This directly causes the defer attribute to lag behind the optimization method of using document. Write. In this case, why should we use it? In fact, the defer attribute is rarely used, which is a very typical "chicken ribs" feature.

So where are applications using the defer attribute? I guess there is something, though I don't know.

 

Break through the limitations of two connections

In the previous article, we can see that although the document. Write method can load the script file in parallel, it is still restricted by the browser. According to the HTTP standard, only two connections can exist for the same domain at the same time. At this point, my dear browsers have all done well. If we want to break through this restriction, we need to add domain names. In fact, the browser determines the domain name in a very strict way. The subdomain names under the same domain name, different ports of the same domain name, are not the same. Generally, it is a common practice to use a subdomain name to increase the number of concurrent connections.

Many friends already know this method, and its application is too common. However, please note that a connection is established when any resource is requested, and the browser does not differentiate the connection of a domain name. Therefore, no matter how you download images, CSS files, JavaScript files, or Ajax connections established by the XMLHTTPRequest object, they all fall within the "two connections". Pay attention to this during optimization. In addition, the number of connections simultaneously established in a browser is not as good as possible. According to the experiment data, it is most appropriate for the browser to establish 6 to 7 connections at the same time. Therefore, it is appropriate to use 3 to 4 subdomains.

Now let's take a look at the effect. You can modify the c: \ windows \ system32 \ drivers \ etc \ hosts file to set the local DNS ing. As follows:

Add the following ing to the hosts file:

127.0.0.1 www. Test. com127.0.0.1 sub0.test. com127.0.0.1 sub1.test. com127.0.0.1 sub2.test. com127.0.0.1 sub3.test. com127.0.0.1 sub4.test. com127.0.0.1 sub5.test.com

 

 

We can add more subdomains for future use.

Next we can load the script file from multiple different subdomains on the page, as shown below:

Load script files from different subdomains

 <  Html   Xmlns = Http://www.w3.org/1999/xhtml"   >  < Head   Runat = "Server"  >  <  Title  > Untitled page </  Title  >  <  Script   Type = "Text/JavaScript"   Language = "JavaScript" >  Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Http://sub0.test.com/Scripts.ashx? A "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Http://sub0.test.com/Scripts.ashx? B "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type ="Text/JavaScript "Language =" Javascript "'+ 'Src =" Http://sub1.test.com/Scripts.ashx? C "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src =" Http://sub1.test.com/Scripts.ashx? D "> <'+'/SCRIPT> '); Document . Write ('<SCRIPT type =" Text/JavaScript "Language =" Javascript "'+ 'Src ="Http://sub2.test.com/Scripts.ashx? E "> <'+'/SCRIPT> '); </  Script  >  </  Head  >  <  Body  > ... </  Body  >  </  Html  > 

 

 

Open the page in the browser and try it? Remember how long it took for us to load the page? More than 8 seconds! Now the loading can be completed in less than 2 seconds (2 ).

Figure 8: parallel loading using multiple subdomains

 

Unfortunately, we have to optimize the situation in the Firefox browser. We will discuss this issue next time. The following optimization scheme will be difficult, but as long as we make proper use of it, it will greatly improve the performance of perceived.