What is cache ?
Definition : Browser Caching is to speed up browsing. The browser stores recently requested documents on the user's disk . When a visitor requests this page again, the browser can display the document from the local disk. Can speed up the page reading.
The role of cache :
1. Reduce latency, make your website faster and improve user experience.
2. Avoid network congestion, reduce request volume, and reduce output bandwidth.
Page content Cache strategy:
At present , resources such as JS , css , static page files and pictures of our business are placed on the imgcache domain name machine, and the caching strategy is uniformly set by the operation and maintenance personnel on apache . The foreground is displayed through the callback package of the Http request. The two key attributes are Expires and Cache-Control . Expires sets the validity period of the object, which is the HTTP/1.0 specification; max-age is an instruction of Cache-control to set the age (number of seconds) of the object, which is the HTTP/1.1 specification, and max-age has a higher priority than Expires .
The max-age in Cache-Control is the main means to implement content cache. There are 3 common strategies: a combination of max-age and Last-Modified (If-Modified-Since), and only max-age, max-age and ETag. combination.
Combination of I , max-age and Last-Modified (If-Modified-Since) :
The combination of max-age and Last-Modified (If-Modified-Since) is more commonly used in our business. Now let’s introduce it in detail. This strategy is to give a resource verification while giving max-age. Method: Last-Modified, which indicates the last modification time of the response resource, for example, Last-Modified: Thu, 08 Apr 2010 15:01:08 GMT. This attribute has actual value only when it is used in conjunction with Cache-control. Checkability, can achieve 304 response when the cache resource exceeds max-age when the browser requests again, so that the browser can use the previous cache again
first step:
1. The browser requests the resource for the first time http://imgcache.qq.com/paipai/cos/portal/js/spu.js
2. The browser searches the temporary file directory and finds that there is no cache content, so it sends a request to the web server
3. The Web server receives the request, responds to the resource, and sets Cache-control: max-age=600, Last-Modified: Wed, 29 Sep 2010 09:59:03 GMT
4. When the browser receives the response and displays the content, it caches the content of the response in the temporary file directory with "http://imgcache.qq.com/paipai/cos/portal/js/spu.js" as the key
Illustration: The first request, there is no cache, the result is 200, and the response packet contains max-age and Last-Modified.
The second step:
1. The interval between the first step request is less than 10 minutes
2. The browser requests the resource again http://imgcache.qq.com/paipai/cos/portal/js/spu.js
3. The browser queries the temporary file directory and finds that there is cache content, so it checks the max-age, it has not expired, read it directly, and respond to the user. (HTTP status (Cache))
Icon: In less than 10 minutes interval, request this js file again, read the content directly from the cache
third step:
1. The interval between the first step request has exceeded 10 minutes
2. The browser requests the resource again http://imgcache.qq.com/paipai/cos/portal/js/spu.js
3. The browser searches the temporary file directory and finds the cache content, so it checks the max-age, which has expired, and finds that the resource has Last-Modified, so bring If-Modified-Since: Wed, 29 Sep 2010 09: 59:03 GMT, send request to web server
4. After receiving the request, the Web server finds that there is If-Modified-Since, so it compares with the last modification time of the requested resource. If the modification time is newer than the requested package time, it means that the resource has been modified, and the package body responds. Reply to the entire resource content (HTTP status 200); if the modification time is not newer than the time of the request packet, it means that the resource has not been changed during this period. There is no need to reply to the entire resource, and only the header is responded without the body (HTTP status 304) To tell the browser to continue using the cache content in the temporary directory to display.
Icon: Do not do the operation of clearing the cache. After 1 hour, request this js file again. The max-age has expired, but the modification time has not changed, so 304.
II ,仅 max-age
The most basic strategy, just add Cache-control: max-age=[secs] in the header field of the return packet
For example, Cache-control: max-age=1800 indicates that the cache time is 30 minutes. Only using such a statement can enable the browser to write the content of the HTTP response to the temporary directory for cache
first step:
1. The browser requests resource for the first time http://imgcache.qq.com/qqshow_v3/css/index_.css
2. The browser searches the temporary file directory and finds that there is no cache content, so it sends a request to the web server
3. The Web server receives the request, responds to the resource, and sets Cache-control:max-age=3600
4. When the browser receives the response and displays the content, it caches the content of the response in the temporary file directory with "http://imgcache.qq.com/qqshow_v3/css/index_.css" as the key
The second step:
1. The interval between the first step request is less than 60 minutes
2. The browser requests the resource again http://imgcache.qq.com/qqshow_v3/css/index_.css
3. The browser queries the temporary file directory and finds that there is cache content, so it checks the max-age, it has not expired, read it directly, and respond to the user. (HTTP status "(Cache)")
third step:
1. The interval between the first step request has exceeded 60 minutes
2. The browser requests the resource again http://imgcache.qq.com/qqshow_v3/css/index_.css
3. The browser queries the temporary file directory and finds that there is cache content, so it checks the max-age, it has expired, and initiates a request to the web server. (HTTP status "200")
III , the combination of max-age and ETag
这个策略是，在给出max-age的同时，给出另一种资源的验证方式：ETag，标示这个响应资源由开发者自己确定的验证标识，例如ETag: "12345678"
同样这个属性也只有配合Cache-control的时候才有实际价值，是声明校验资源的方式，ETag的使用为实现304响应提供了更多的灵活性
第一步：
1、浏览器第一次请求资源http://imgcache.qq.com/qqshow_v3/css/index_.css
2、浏览器查询临时文件目录发现无cache内容，于是发出请求到web server
3、Web server接到请求，响应资源，并设定Cache-control:max-age=3600，ETag: "12345678"
4、浏览器接到响应，将内容展示的同时，在临时文件目录以“http://imgcache.qq.com/qqshow_v3/css/index_.css”为key缓存这个响应的内容
第二步：
1、离第一步请求间隔时间不到60分钟
2、浏览器再次请求资源http://imgcache.qq.com/qqshow_v3/css/index_.css
3、浏览器查询临时文件目录发现有cache内容，于是检查max-age，还未过期，直接读取，响应给用户。（HTTP状态“(Cache)”）
第三步：
1、离第一步请求间隔时间已超过60分钟
2、浏览器再次请求资源http://imgcache.qq.com/qqshow_v3/css/index_.css
3、浏览器查询临时文件目录发现有cache内容，于是检查max-age，已经过期，发现资源带有ETag，于是在请求包中带上If-None-Match: "12345678"，发请求给web server
4、Web server收到请求后发现有If-None-Match，于是和被请求资源的验证串进行比对，如果校验串的内容不一致，则返回整个资源包体（HTTP状态200），如果校验串的内容一致，仅返回包头（HTTP状态304），告诉浏览器继续使用临时目录里的cache内容展示。
当前业务运维和开发的Cache策略：
1、 js文件：js文件是整个前台页面的灵魂，具有对于承担着前台页面主要功能，用户操作比较多的JS文件，运维人员设置cache一般为10分钟（max-age=600）。对于统计或者测速功能的JS文件，cache通常为一年（max-age=31536000），见下图所示：
2、 样式文件：与本业务相关，经常会有变动优化类的css文，运维人员设置cache一般为1个小时（max-age=3600），公共类的css文件cache通常为一年（max-age=31536000）。
3、 图片文件：根据图片修改的频率，经常需要优化的图片（本业务需要使用的），运维人员设置cache为1个小时（max-age=3600）。公共图片cache时间s久一些，比如static.paipaiimg.com域名下的某些图片cache达到一年时间。
4、 动静态文件:基本都是与业务相关联的页面文件，运维人员设置cache一般为1个小时（max-age=3600）。
5. CGI/PHP file: The developer sets the max-age value in the code according to the specific function of the CGI/PHP file in the business. The time is generally 1 hour. Generally, CGI/PHP files that support dynamic content on the page do not need to be cached, such as product inventory information and product information.
6. Minimize the 304 return code.
This article is reproduced from http://www.51testing.com/html/43/434343-243768.html