[Beijing website production] Network transmission link of high-performance web development

Network transmission link of high performance web development

1. Reduce the number of requests

◆ Cache, use Expires, etc. to set the expiration time; Do not send a request if the content has not expired

◆ Consolidate small content, for example, put a large number of small pictures in one picture, and then present them with CSS (do not merge large content)

◆ delayed loading; Some content, such as images, is loaded only when the page is rendered (usually the scroll bar is loaded later); Reduce unnecessary requests

◆ Merge duplicate content and documents

◆ Consider using third-party CDN resources. For example, jQuery has a free CDN. Some users have already visited this content on other websites, so it will be faster to load to our website (and use CDN to reduce the pressure on our server)

◆ Use Local Storage in HTML 5 to save data

2. Reduce the volume of response content

◆ When appropriate, only response header 304 is returned (HTTP cache, such as ETag)

◆ Use Gzip and other compressed file contents

◆ Use free third-party tools to compress the size of files such as css, js and html (such as our common jquery. min. js)

◆ Appropriate use of Ajax operations

◆ When appropriate, separate the style, HTML and data (greatly reduce the file volume when there is a large amount of data)

1. < ul   id = "id" >  
2.      < li   style = "A lot of styles" > Data </ li >  
3.      < li   style = "A lot of styles" > Data </ li >  
4.      < li   style = "A lot of styles" > Data </ li >  
5. </ ul >  
6. Divided into HTML style and data
7.  
8. HTML  
9. < ul   id = "id" >  
10.      < li > </ li >  
11.      <!-- If you use data templates and other methods, you only need to keep one Li, otherwise you need multiple -->  
12. </ ul >  

Some basic common sense about styles stored in CSS files, although there are many lis, you don't need to specify a class for each li

data

◆ Return with JSON (it can also be embedded in the page if it is troublesome)

◆ Choose a smaller data format. For example, JSON is generally smaller than XML (smaller after compression)

◆ In design, only part of the changed data will be transmitted (for example, to obtain 100 pieces of data, 90 pieces of data may have been loaded, then 10 pieces of data will be loaded)

◆ Remove unnecessary HTTP headers in the request and response (for example, sometimes HTTP headers indicating whether the current data is JSON or XML should be passed in the WCF Restful service)

◆ Some functions, such as compression, will consume CPU, and ajax, will increase development workload. Please choose carefully

3. Increase the number of concurrent requests

◆ In RFC, the browser can only use two threads to access resources under the same domain name at the same time (many new browsers support six or more); The solution is to use a subdomain name, such as 1.abc.com 2.abc.com

1. < img   src  = "1.abc.com/1.png"   />  
2. < img   src  = "1.abc.com/2.png"   />  
3. < img   src  = "2.abc.com/3.png"   />  
4. < img   src  = "2.abc.com/4.png"   />  
5. < img   src  = "3.abc.com/5.png"   />  
6. < img   src  = "3.abc.com/6.png"   />  
7. < img   src  = "4.abc.com/7.png"   />  
8. < img   src  = "4.abc.com/8.png"   />  

◆ Disassemble a large file (for example, some people like to put the entire website's js in a file) into a series of small and medium-sized files (conducive to concurrent loading and caching!). The size of this file is very important. My personal recommendation is 10k-200k (depending on the network)

◆ The previous item does not conflict with 1-2. It is not allowed to have too many or too few files. It is a balance problem

◆ By splitting files, the loading speed of the most commonly used pages (such as the home page) becomes faster

◆ Control the loading sequence, for example, first load the general structure of the page, then multiple javascript asynchronous requests to load data (change a large html into multiple small html fragments)

4. Other special technologies

◆ Using the long connection feature of HTTP 1.1, the server can actively push data to a certain extent (reducing a lot of unnecessary polling)

5. Tools

◆ Fiddler (Free)

◆ FireDebug (Free)

◆ HttpWatch

Some references from MSDN and other third-party articles

label: Beijing website production High end website construction