Optimize Website Design (6): Place script definitions or references at the bottom of the document

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see

Best practices for speeding up your web site http://developer.yahoo.com/performance/rules.html

At the same time, they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects.

In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh

      Technorati tags: performance, web design, ASP. NET

   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

I will discuss the sixth principle in this article: Put scripts at bottom (put the script definition or reference at the bottom of the document ).

In my previous article, I discussed how to optimize Website Design (5): placing style definitions on top is a principle that impressed me deeply, the reason is not that the definition of this principle is too profound, but that it has been so many before, but it is not realized that this is a good practice.

The principle "place a script definition or reference at the bottom of the document" mentioned in this article is a principle that I did not notice for a long time. In other words, I used to put the script or Script Reference in the head, for example:

<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "webapplication1.default" %>  <!  Doctype   Html  >  <  Html   Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head   Runat  = "Server"  >      <  Title  > </  Title >      <  Script   SRC  = "Scripts/jquery-2.0.0.min.js"  > </  Script  > <SCRIPT src = "Scripts/knockout-2.2.1.js" > </SCRIPT> <SCRIPT src = "Scripts/modernizr-2.6.2.js" > </SCRIPT> <SCRIPT src = "Default. js" > </  Script  >  </  Head  > <  Body  >      <  Form   ID  = "Form1"   Runat  = "Server"  >          <  Div  >          </  Div  >      </  Form  >  </  Body  > </  Html  > 

 
For a long time, I did not realize that this may become a problem. Later, when I was studying performance-related issues, I gradually noticed it. Putting the script definition or reference at the bottom of the document will help increase the degree of parallelism during page loading and speed up the page.
 

 
The following section is described in the HTTP/1.1 document:
 

Clients that use persistent connections shocould limit the number of simultaneous connections that they maintain to a given server. A single-user client shocould not maintain more than 2 connections with any server or proxy. A proxy shoshould use up to 2 * n connections to another server or proxy, where N is the number of simultaneously active users. these guidelines are intended to improve HTTP response times and avoid congestion

We know that HTTP itself is stateless, which means that each request needs to establish an independent connection. However, it was improved from HTTP/1.1 to allow the keep-alive connection between the client and the server. This is done because when the page is loaded, it is often necessary to load a lot of additional resources (such as scripts, style sheets, images, etc.), if each request requires a connection, it is obviously inappropriate. Maintain the keep-alive feature so that connections can be reused. in a period of time, access requests to the same domain do not need to create a new connection, but use the previous connection.

However, there is a problem here. If too many connections are maintained, it is obviously not a good thing for both the client and the server (this consumes resources ), therefore, we recommend that you do not maintain more than two connections for the same domain in HTTP/1.1. In fact, this restricts the degree of parallelism. Although it seems that we can bypass this parallel problem by placing these scripts in different domains, but what's terrible is that as long as the browser starts downloading the script file, then it cannot use more than two connections to work simultaneously, even if these resources are placed in different domains.

But as far as I know, modern browsers have made some breakthroughs (maybe more than two connections), but in any case, this is always limited. There are some ways to manually modify the browser settings, but I do not recommend this.

If the script files are placed in the head, and there are a lot of scripts, downloading these script files will occupy a few connections that are not enough, you must wait until all these scripts are downloaded, to download other parts of the page. This may be a user experience that causes page stagnation.

So how can we use this principle? Easy to modify the pageCodeAs follows:

 <% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "webapplication1.default" %>  <!  Doctype   Html  >  <  Html   Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head   Runat  = "Server" >      <  Title  > </  Title  >  </  Head  >  <  Body  >      <  Form   ID  = "Form1"   Runat  = "Server"  >          <  Div  >         </  Div  >      </  Form  >      <! -- Moving the script to the bottom of the document helps increase the page loading speed -->      <  Script   SRC  = "Scripts/jquery-2.0.0.min.js"  > </  Script  > <SCRIPT src = "Scripts/knockout-2.2.1.js" > </SCRIPT> <SCRIPT src = "Scripts/modernizr-2.6.2.js" > </SCRIPT> <SCRIPT src ="Default. js" > </  Script  >  </  Body  >  </  Html  > 

 

Interestingly, although such a movement is not difficult, some people really do not want to make such a change (some reasons are that after this is done, the document structure is not clear enough ). As a compromise solution, you can set a defer attribute when adding a script to identify the script to delay loading.

 <% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "webapplication1.default" %>  <! Doctype   Html  >  <  Html   Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head   Runat  = "Server"  >      <  Title  > </  Title  >      <! -- Use the defer attribute to delay loading the script -->      <  Script  SRC  = "Scripts/jquery-2.0.0.min.js"   Defer  = "Defer"  > </  Script  > <SCRIPT src = "Scripts/knockout-2.2.1.js" Defer = "Defer" > </SCRIPT> <SCRIPT src = "Scripts/modernizr-2.6.2.js" Defer = "Defer" > </SCRIPT> <SCRIPT src = "Default. js" Defer = "Defer" > </  Script >  </  Head  >  <  Body  >      <  Form   ID  = "Form1"   Runat  = "Server"  >          <  Div  >          </  Div  >      </  Form >  </  Body  >  </  Html  > 

It looks good,Unfortunately, not all browsers support this feature.. The complexity of network development lies in this. I almost see you nodding with a smile. So, why can't we accept the safe practice of placing the script at the bottom of the document?

It is worth noting that not all codes are suitable for moving from the top to the bottom of the document. For example, if these scripts need to dynamically add HTML elements (the document. Write method may be called) during the loading process, there will be problems. It seems that many people stick to the principle of the original practice. If you have never used a framework similar to jquery, you are excitable. On the other hand, you should not think so. If you have never heard of and used jquery, you will be farther and farther away from the large army.

In fact, in practice, we gradually find that in most cases, when using JavaScript, we should wait until the page is ready to start working, because if you start to operate before the page is completely rendered (not on behalf of the user, but on the display), you will not be able to predict what will happen. Jquery creatively introduces document. ready is such an event, and I can responsibly say that as long as your script is in document. after ready, you can move it to the bottom of the document.