High-performance Web development Why reduce the number of requests, how to reduce the number of requests!

The amount of data for the HTTP request header
[Declaration] Reproduced original source: http://www.blogjava.net/BearRui/. Thank you
Let's look at the request header and see if each request brings that extra 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


Return to 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 header sent here is probably 420 bytes, and the request header returned is probably bytes.

It can be seen that each request carries some additional information for transmission (not yet with a cookie in this request), and when the requested resource is small, such as 1 icons less than 1k, the request may have more data than the actual icon.

So when the request is more, the data transmitted on the network is more natural, the transmission speed is naturally slow.

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

The cost of an HTTP connection


The overhead of HTTP connections is even more severe than the extra data on the request header. Let's take a look at the stages from the user entering 1 URLs to downloading content to the client:

1. Domain Name resolution
2. Turn on the TCP connection
3. Sending the request
4. Wait (mainly including network latency and server processing time)
5. Download Resources

Many people may think that each request spends most of the time on downloading resources, let's see Blogjava resources Download Waterfall Graph (each color represents the stage corresponding to the above 5 stages):

You may be surprised to see that the time spent in the waiting phase is much more than the actual download time, tell us:
1. The majority of the time spent on each request is at other stages, not in the download resources phase
2. Small resources will still take a lot of time at other stages, but the download phase will be relatively short (see the 6th resource, only 284Byte).

How do we optimize for the 2 cases mentioned above? Reduce the number of requests to reduce the expense of other phases and the data transferred in the network.

How to reduce the number of requests

1. Merging files
Merging files is to combine many JS files into 1 files, many CSS files merged into 1 files, this method should be used by many people, here does not do a 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 the use of CSS Sprite, by controlling the position of the background image to display different pictures. This technology is also used by everyone, do not do a detailed introduction, recommended 1 online merged images of the site: http://csssprites.com/

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

4. Using Image maps
Image maps combines multiple images into 1 images, and then uses the <map> tags in the HTML to connect the images and perform different actions in different areas of the click image, which is easier to use in the navigation bar.
Image map using the method see: http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5. Data embedding image
This method embeds the image directly into the HTML for use in order to reduce the HTTP request, but this increases the size of the HTML page, and the embedded picture cannot be cached. See this image below:


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

The above methods are both pros and cons, under different circumstances can choose different ways of use, such as the use of data embedded image although the number of requests reduced, but will increase the page size.


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

High-performance Web development Why reduce the number of requests, how to reduce the number of requests!