HTTP protocol (iv) Cache

I have written an HTTP protocol description before. I will continue to introduce the caching mechanism in HTTP. The HTTP Protocol provides a very powerful caching mechanism. Understanding these caching mechanisms is very helpful for improving website performance. This article describes how to process "browser cache" between a browser and a Web server, and how to control the cached http header.

This document uses Fiddler to view HTTP request and Response. If you are not familiar with this tool, refer to [Fiddler tutorial]. When reading this article, be sure to open Fiddler for practice.

Reading directory

 

Concept of Cache

Caching is really everywhere. There are browser-side caching, server-side caching, proxy server Caching, ASP. NET page caching, and Object Caching. The database also has a cache, and so on.

In http, the browser cache and cache proxy are used.

 

Http cache means that when a Web request arrives at the cache, if there is a "cached" Copy locally, the file can be extracted from the local storage device rather than from the original server.

Benefits of caching

The benefits of caching are obvious,

1. Reduced redundant data transmission and reduced network fees.

2. reduces the burden on servers and greatly improves website performance

3. Accelerated loading of web pages on the client

 

Fiddler allows you to conveniently view cached headers.

In Fiddler, all headers are put together in different categories to facilitate viewing.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/122532HH-0.png "/>

 

How to determine cache freshness

The Web server determines whether the browser cache is up to date in two ways.

First, the browser tells the Web server the last modification time of the cached file through the header "If-Modified-Since.

Second, the browser tells the Web server the ETag of the cached file through header "If-None-Match.

 

Determine the cache freshness through the last modification time

1. the browser client wants to request a document. First, check the local cache and find that the file is cached. Obtain the last modification time of the document in the cache, and use: If-Modified-Since, send a Request to the Web server.

2. when the Web server receives a Request, the server's document modification time is Last-Modified): Compared with If-Modified-Since in the request header, If the time is the same, the cache is still the latest, the Web server sends 304 Not Modified to the browser client, telling the client to directly use the version in the cache. For example.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1225325412-1.png "/>

3. If the document has been updated. The Web server sends the latest version of this document to the browser client, such.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1225321V0-2.png "/>

 

Instance: Open Fiddler, and then open the blog homepage. Then F5 refreshes the browser several times. You will see that the blog garden homepage is also cached.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1225325609-3.png "/>

 

Cache-related Headers

Let's take a look at the specific meaning of each header.

Request

Cache-Control: max-age = 0	In seconds
If-Modified-Since: Mon, 19 Nov 2012 08:38:01 GMT	The last modification time of the cached file.
If-None-Match: "0693f67a67cc0: 0"	The Etag value of the cached file.
Cache-Control: no-cache	No Cache
Pragma: no-cache	No Cache

 

 

 

 

 

Response

Cache-Control: public	The response is cached and shared among multiple users. For details about the difference between public cache and private cache, see the other section)
Cache-Control: private	Responses can only be used as private caches and cannot be shared among users.
Cache-Control: no-cache	Remind the browser to extract documents from the server for verification
Cache-Control: no-store	Never use cache for confidential and sensitive files)
Cache-Control: max-age = 60	Relative cache expiration time after 60 seconds)
Date: Mon, 19 Nov 2012 08:39:00 GMT	Current response sending time
Expires: Mon, 19 Nov 2012 08:40:01 GMT	Absolute cache expiration time)
Last-Modified: Mon, 19 Nov 2012 08:38:01 GMT	Last modification time of server files
ETag: "20b1add7ec1cd1: 0"	Etag value of the Server File

 

 

 

 

 

 

 

 

 

 

What if both cache-control and Expires exist?
The browser always takes precedence over cache-control. Expires is considered only when cache-control is not available.

 

ETag

ETag is the abbreviation of Entity Tag. A hash string generated based on the object content is similar to the result after MD5 or SHA1. It can identify the resource status. When the resource sends a change, the ETag also changes.

ETag is generated by the Web server and sent to the browser client. The browser client does not need to care about how Etag is generated.

Why is ETag used? It is mainly used to solve some problems that Last-Modified cannot solve.

1. Some servers cannot accurately obtain the last modification time of the file. In this way, the last modification time cannot be used to determine whether the file is updated.

2. Some files are frequently Modified and can be Modified in seconds or less. Last-Modified can only be accurate to seconds.

3. The last modification time of some files has changed, but the content has not changed. We do not want the client to think this file has been modified.

 

Instance, open Fiddler, and open the blog home page. You can see that many images or CSS files are cached. You can compare the values of ETag to determine whether the file is updated.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1225323W4-4.png "/>

 

Browser does not use Cache

CTRL + F5 force refresh the browser or set IE. Allows the browser not to use the cache.

1. the browser sends an Http request to the Web server, with the header containing Cache-Control: no-cache. It explicitly tells the Web server that the client does not use the Cache.

2. The Web server will send the latest documents to the browser client.

 

Instance:

Open Fiddler, open the blog home page, and press CTRL + F5 to force refresh the browser. You will see

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/122532K54-5.png "/>

The role of Pragma: no-cache is the same as that of Cache-Control: no-cache. Cache is not used.

Pragma: no-cache is defined in HTTP 1.0, so to be compatible with HTTP 1.0, Pragma: no-cache and Cache-Control: no-cache are used at the same time.

 

Directly use the cache without server Verification

Press F5 to refresh the browser, enter the URL in the address bar, and press Enter. These two actions are different.

Press F5 to refresh the browser. the browser will go to the Web server to verify the cache.

If you enter the URL in the address bar and press enter, the browser will "directly use the valid cache" instead of sending an http request to the server to verify the cache. This is called cache hit, as shown in

 

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/122532K31-6.png "/>

Example: Compare the first visit to the blog garden home page and the second blog garden home page

1. Start Fiddler and use firefox to open the blog homepage. More than 50 sessions are found.

2. Press CTRL + X to delete all sessions in Fiddler. Close firefox, re-open a firefox, and open the blog homepage. Only over 30 sessions are found.

Analysis; the missing session is because firefox uses the cache directly without sending an http request.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1225322218-7.png "/>

 

 

How to Set IE to not use Cache

Open IE. On the toolbar, choose tools> Internet Options> General> browsing history settings. Select "never ". Save the settings.

Click "delete" to delete all Temporary Internet Files. The files cached by IE are Temporary Internet Files ).

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/12253230M-8.png "/>

 

Differences between public cache and private Cache

Cache-Control: public indicates that a public Cache can be shared by thousands of users.

Cache-Control: private indicates that only private Cache is supported. private Cache is dedicated to a single user.

650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/12253223M-9.png "/>

This article from the "small tank" blog, please be sure to keep this source http://xiaotank.blog.51cto.com/2461521/1073659