Use HTTP cache to optimize your Web site

Original address: http://www.cnblogs.com/cocowool/archive/2011/08/22/2149929.html

For the website, speed is the first place. Users always hate to wait, facing the load of video and page, is a very bad user experience. So how to use the cache to optimize the site, it deserves in-depth study.

What is a cache?

Caching is an example of a space-time change that exists everywhere. By using extra space, we are able to get faster speeds. When users browse the website, the browser can save a copy of the pictures or other files in the site locally, so that when the user visits the site again, the browser will not have to download all the files, reducing the amount of download means that the speed of page loading is increased.

The following illustration shows how the browser interacts with the server.

Disadvantages of caching

Caching is useful, but it also brings a certain flaw. When our website has been updated, such as logo change, the browser still retains the old version of the logo, then how to determine the browser to use local files or the new files on the server? Here are a few ways to judge.

Caching Method 1:last-modified

Server in order to notify the browser of the current version of the file, will send a last modified time label, for example:

Last-modified:fri, Mar 04:00:25 GMT

File Contents (could is an image, HTML, CSS, Javascript ...)

This allows the browser to know the file creation time he received, and in subsequent requests, the browser will verify the following rules:

1, Browser: Hey, I need to logo.png this file, if it is in Fri, after the 04:00:25 GMT modified, please send me.

2, Server: (Check the file modification time)

3, Server: Hey, this file has not been modified after that time, you have the latest version.

4, Browser: Very good, then I will show to the user.

In this case, the server simply returns a 304 response header, reducing the amount of data in response and increasing the speed of the response.

Caching Method 2:etag

In general, it is possible to compare files by modifying the time. However, in some special cases, such as the server clock error, the server clock is modified, daylight saving time DST arrives after the server times are not updated in time, these will cause the issue of comparing the file version by modification time.

The etag can be used to solve this problem. An etag is a unique identifier for a file. Like a hash or fingerprint, each file has a separate flag that changes as soon as the file changes.

The server returns the ETag label:

etag:ead145f

File Contents (could is an image, HTML, CSS, Javascript ...)

The next order of access is as follows:

1, Browser: Hey, I need to logo.png this file, there is no mismatch "ead145f" this string of

2. Server: (check etag ...) ）

3, server: Hey, my version here is also "ead145f", you are already the latest version of

4, Browser: OK, then you can use the local cache

As with Last-modified, the ETag solves the problem of file version comparisons. Only the ETAG level is higher than the last-modified.

Caching Method 3:expires

Caching a file, and confirming the version with the server is very good, but there is a disadvantage, we must connect to the server. It's safe to make a comparison before each use, but it's not the best. We can use expiration Date to reduce this request.

As we boil cereal with milk, it is safe to check the milk before each drink. But if we know the expiry time of the milk, we can use it directly before it expires, without having to send it to the test. Once the expiry time is exceeded, we'll buy a new one back. When the server returns, it brings up the expiration time of this data:

Expires:tue, Mar 04:00:25 GMT

File Contents (could is an image, HTML, CSS, Javascript ...)

This way, we avoid a connection to the server before it expires. The browser only needs to judge whether the material in hand is out of date, and it does not need to increase the burden of the server at all.

Caching Method 4:max-age

Expires's method is good, but we have to calculate a precise time each time. The max-age tag makes it easier to handle expiration times. All we need to say is that you can only use this information for one weeks.

Max-age use seconds to measure, here are some common units:

1 days in seconds = 86400

1 week in seconds = 604800

1 month in seconds = 2629000

1 year in seconds = 31536000

Additional tags

Cache tags never stop working, but sometimes we need some control over what's already cached.

Cache-control:public indicates that the cached version can be identified by a proxy server or other intermediary server.

Cache-control:private means that the file is different for different users. Only the user's own browser is able to cache, and the public proxy server does not allow caching.

Cache-control:no-cache means that the contents of the file should not be cached. This is useful in search or page-flipping results, because the same URL, the corresponding content will be changed.

Note: Some tags are only available on browsers that support http/1.1, and if you want to learn more, then RFC2616 and cache docs are recommended.

Resources:

1. How to Optimize Your Site with HTTP Caching

Use HTTP cache to optimize your Web site