Why and how to reduce the number of requests in high-performance web development!


The amount of data in the HTTP request header

Let’s first analyze the request header and see what extra data is brought with each request. Here is the monitored Google request header

Host www.google.com.hk
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv: 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

Response head returned

Date Sat, 17 Apr 2010 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 about 420 bytes, and the returned request header is about 600 bytes.

It can be seen that each request will carry some additional information for transmission (there is no cookie in this request). When the requested resource is very small, such as an icon less than 1K, the data volume of the request may be larger than that of the actual icon.

So the more requests, the more data will be transmitted on the network, and the transmission speed will be slow.

In fact, the data volume of request is small. After all, the data volume of request is limited.

Cost of HTTP connection

Compared with the redundant data in the request header, the overhead of HTTP connection is more serious. Let’s first look at the stages from the user entering a URL to downloading content to the client:

1. Domain name resolution
2. Open 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 is spent downloading resources for each request. Let’s take a look at the download waterfall diagram of blogjava resources (each color represents a stage corresponding to the above five stages):
Why and how to reduce the number of requests in high-performance web development!
You may be surprised to see the figure above. The waiting time is much longer than the actual download time. The figure above tells us:
1. Most of the time spent on each request is in other stages, rather than downloading resources
2. Even smaller resources will still spend a lot of time in other stages, but the download stage will be shorter (see the sixth resource in the figure above, only 284byte).

For the two situations mentioned above, how should we optimize them? Reduce the number of requests to reduce the cost of other phases and the data transferred in the network.

How to reduce the number of requests

1. Consolidated documents
Merging files is to merge a lot of JS files into one file and a lot of CSS files into one file. This method should be used by many people. It will not be described in detail here,
Only one merging tool is recommended: yuicompressor is provided by Yahoo http://developer.yahoo.com/yui/compressor/

2. Merge pictures
This is to use CSS sprite to display different pictures by controlling the position of background pictures. This technology is also used by everyone. Without detailed introduction, we recommend an online website for merging pictures: http://csssprites.com/

3. Merge JS and CSS into one file
The first method above is just to merge several JS files into one JS file and several CSS files into one CSS file. How to merge both CSS and JS into one file? See my other article:

4. Use image maps
Image maps is to combine multiple pictures into one picture, then use the < Map > tag in HTML to connect the pictures, and click different areas of the pictures to perform different actions. Image map is easy to use in the navigation bar.
See http://www.w3.org/tr/html401/struct/objects.htmlාh-13.6 for the usage of image map

5. Data embedded picture
This method embeds the image directly into HTML to reduce HTTP request, but it will increase the size of HTML page, and the embedded image cannot be cached. See the picture below:

The above picture is to use data: to embed the picture into HTML after Base64 encoding. The code is as follows (omitted later, you can see the source code):
<IMG SRC=”data:image/gif;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAWRXhpZgAASUkqAAgAA……”>

In Google’s video search, the video thumbnails are all embedded images, as shown in the following figure:
Why and how to reduce the number of requests in high-performance web development!

Why and how to reduce the number of requests in high-performance web development!
The above methods have advantages and disadvantages. In different situations, you can choose different ways to use them. For example, using data to embed pictures reduces the number of requests, but increases the page size.

So Microsoft’s Bing search uses data to embed pictures in the first time users visit, and then lazy loading real pictures in the background. In the future, users will directly use cached pictures instead of data.

[statement] for reprint, please indicate the source: http://www.blogjava.net/bearrui/ No commercial use!