Why is high performance web development to reduce the number of requests, how to reduce the number of requests!_ related skills

amount of data for HTTP request headers

Let's analyze the request headers to see if each request brings the additional data. Here is the Google request header for monitoring

Host www.google.com.hk
User-agent mozilla/5.0 (Windows; U Windows NT 5.2; En-us; rv:1.9.2.3) gecko/20100401 firefox/3.6.3 gtbdfff GTB7.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-language zh-cn,en-us;q=0.7,en;q=0.3
Accept-encoding gzip,deflate
Accept-charset iso-8859-1,utf-8;q=0.7,*;q=0.7
Keep-alive 115
Proxy-connection keep-alive


The returned response head

Date Sat, APR 08:18:18 GMT
Expires-1
Cache-control Private, Max-age=0
Content-type text/html; Charset=utf-8
Set-cookie Pref=id=b94a24e8e90a0f50:nw=1:tm=1271492298:lm=1271492298:s=jh7cxsix48zoo8nn; Expires=mon, 16-apr-2012 08:18:18 GMT; path=/; DOMAIN=.GOOGLE.COM.HK Nid=33=ejvylqbv2csgpxqtq8dlit2jq4acae9ykku2x-h4hvw_atrgx7nja69uubmbzvhvnkaoe_ JLGGZOOXHQACSFDP1I53C8HWJRTJD0VYTRNWHGYGV491MWBNGKT6LCYBVG; Expires=sun, 17-oct-2010 08:18:18 GMT; path=/; domain=.google.com.hk; HttpOnly
Content-encoding gzip
Server GWS

Content-length 4344


The size of the request headers sent here is probably 420 bytes, which returns the requested head about bytes.

It can be seen that each request will bring some additional information for transmission (this request is not with a cookie), when the requested resources are very small, such as 1 less than 1k of the icon, may request with more data than the actual icon data volume.

So when the more requests, the data transmitted on the network naturally more, transmission speed naturally slow.

In fact, the request with the amount of data or small problem, after all, request can bring the amount of data is still limited.

Cost of HTTP connections


The overhead of HTTP connections is even more severe than the extra data in the request header. Let's take a look at the stages from which the user enters 1 URLs to the download to the client:

1. Domain Name resolution
2. Open the TCP connection
3. Send Request
4. Wait (mainly including network delay and server processing time)
5. Download Resources

Many people may think that most of the time a request is spent on downloading resources, let's take a look at the Blogjava resource download waterfall (each color represents a phase corresponding to the above 5 stages):

Looking at the above picture you may be surprised that the time spent in the waiting phase is much more than the actual download time, the above figure tells us:
1. Most of the time spent on each request is at another stage, not at the download resource stage
2. Small resources will still spend a lot of time in other stages, but the download phase will be relatively short (see the 6th resource on the map, only 284Byte).

What should we do to optimize the 2 cases mentioned above? Reduce the number of requests to reduce the expense of other stages and the data transferred in the network.

How to reduce the number of requests

1. Merging documents
Merging files is a lot of JS files merged into 1 files, many CSS files merged into 1 files, this method should be used by many people, here do not do detailed introduction,
Only 1 merged tools are recommended: yuicompressor This tool is provided by Yahoo. http://developer.yahoo.com/yui/compressor/

2. Merging pictures
This is using CSS sprite to display different pictures by controlling the position of the background picture. This technology is also used by all, do not do a detailed introduction, recommend 1 Online merged pictures of the site: http://csssprites.com/

3, the JS, CSS merged into 1 files
The 1th method above said just a few JS files merged into 1 JS files, a few CSS files merged into 1 CSS files, how to the CSS and JS are merged into 1 files, see my other 1 articles:
Http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

4. Use image maps
Image maps is a combination of multiple pictures into 1 pictures, and then use the <map> tags in html to connect the picture, and achieve click on different areas of the picture to perform different actions, image map in the navigation bar is relatively easy to use.
How to use image map see: http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5, data embedded picture
This method encodes the image directly into HTML and uses it to reduce the HTTP request, but this increases the size of the HTML page, and the embedded picture cannot be cached. See the following picture:


The image above is the image of the Base64 encoded using data: embedded in the HTML, the code is as follows (the following omitted, you can view the source code to see):



Google's video search, the search out of the video thumbnails are used in embedded pictures, see the following figure:



The above methods are both pros and cons, in different situations can choose different ways to use, such as the use of data embedded pictures Although reduced the number of requests, but will increase the size of the page.


So Microsoft's Bing search uses data to embed images when users first visit them, and then lazy to load real pictures, then access the cached pictures directly, instead of using data.

[Statement] Reproduced please indicate the source: http://www.blogjava.net/BearRui/. No commercial!