The "Web optimization" yslow optimization rule (i) minimizes the number of HTTP requests.

Yahoo! 's best practice for front-end optimization is called the YSlow optimization rule. Mainly includes seven categories of optimizations:

Content, server-side, Cookie, CSS, JavaScript, image, and mobile (primarily for mobile), contains 35 rules of thumb for optimization and acceleration.

one, reduce the HTTP request

A web-access process is actually a series of request-response processes that involve the TCP/IP handshake, the connection process (because of the stateless type of HTTP, which means that each request requires a connection). In the Firefox browser, through debugging tools such as Firebug, you can clearly see the HTTP request and the requested timeline in the page load and analyze the performance of the Web site. The following illustration shows the HTTP request required to load a page. As you can see, there is an HTTP request that has reached more than 8s, and if the resource is necessary for page rendering, the rendering of the page must wait until the resource has finished loading before it can begin, without a doubt leading to a bad user experience.

Below the Firebug Network tab, the total number of HTTP requests required for page load and the total size of the requested resource are given:

The YSlow law points out that 80% of the user's response time is spent on the front end, the most important part of which is used in downloading documents such as pictures, JS, CSS, flash and other resources. The overhead of HTTP requests is larger relative to page rendering. And for the browser, the number of concurrent connections under the same domain name has a certain limit. This means that if a page has too many HTTP requests, because the browser cannot download multiple resources concurrently, it has to be downloaded in a similar serial way (not in fact serial, but with a lower number of concurrent numbers), thus increasing the response time of the page to some extent. For concurrent connections to browsers, refer to this article (http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/)

There are several ways to reduce the number of HTTP requests:

1. Merge Files . Used to merge files such as scattered js,css in the web, reducing the number of HTTP requests that page loads by reducing the number of external reference files.

2. CSS Sprite. A way of processing. It allows you to combine multiple small pictures of a page into a large picture, and then position the desired location via the background-position of the CSS. This approach is more common, and almost all of the best sites use this method to reduce the number of HTTP requests scattered across the pages of each image. For example, Baidu paste in the picture material, are merged into such a large picture:

(Http://cdn.iknow.bdimg.com/static/common/pkg/common_z_63fa369.png), and then use CSS positioning to determine the background image. In the CSS. The position of the background image can be located by Background-position. In general, CSS Sprite technology is used for background images in the page, and for other large individual images (such as the picture display system, generally do not use the technology). CSS Sprite Technology There are other advantages, more can be viewed: http://baike.baidu.com/link?url= w7-zunvnq7kmxem-n3owgoti8dkloqhal9s2nrwr5xl8hfvjkgxmakge53ow1m5wxe-pqjlrltw_wwiyqtoh0q

Http://alistapart.com/article/sprites (recommended)

3. Image Maps. This is not a recommended scenario and is not supported by all browsers. So don't repeat it here.

4. Inline Image. Use Data:url scheme to embed the binary data of a picture into a CSS file. For example, in the New default tab page of the Firefox browser, the way to use the inline image is: url ("Data:image/png;base64, Ivborw0kggoaaaansuheugaaafyaaadhcayaaabsmui6aaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9iz S54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/ii ... "... ...".... "...")

The keyword: image/png indicates the MIME type of the picture, while Base64 refers to the image data encoding compression method, here is the Base64 algorithm. A long sequence of subsequent sequences is the data stream of the picture. It is important to note that this approach has certain limitations, such as no more than 1024 bytes, and is not widely supported by the browser.

In recent years, due to the continuous improvement of bandwidth conditions and the reduction of hardware costs, as well as the cache and distributed clustering technology maturity, it seems that a single level of performance optimization has become less important, especially in the face of hundreds of distributed clusters, reducing the number of HTTP connections does not seem to give a qualitative leap in loading speed. However, for large enterprises, reducing the number of HTTP requests means reducing traffic consumption, and when the user is an billion level, even if a single traffic page reduces the size of 1 B, it can save considerable cost. After all, for large companies, byte is money.

Reference documents:

1. Https://developer.yahoo.com/performance/rules.html#num_http

2. http://www.w3.org/TR/html401/struct/objects.html#h-13.6

3. http://tools.ietf.org/html/rfc2397

4. Http://alistapart.com/article/sprites

5. Http://baike.baidu.com/link?url=w7-ZuNVNQ7KmXeM-n3owgotI8dkLOqHAl9s2Nrwr5xl8HfVjKgXMAKGe53Ow1M5wxe-PqJLrLtW_ wwiyqtoh0q

6. http://www.cnblogs.com/flyingchen/archive/2009/09/03/1559945.html

7. http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/

8. http://www.iefans.net/qingqiu-bingfa-lianjieshu-xianzhi/

9. http://www.iefans.net/bingfa-lianjieshu-sudu-ceshi/