什么是浏览器缓存
浏览器缓存,又称 HTTP 缓存,指的是:当我们浏览网站的时候,器存储会在本地存储一个副本,以便下次访问同个网址的时候可以不再连接服务器,直接使用本地的缓存。服务器端程序可以通过 HTTP Cache Headers 来控制缓存行为,减轻服务器的负担,缩短了响应时间,显著得提高网站的性能。
HTTP Cache Headers
当服务器发出响应的时候,可以通过两种方式来告诉客户端(浏览器)如何处理缓存:
第一种是 Expires,比如:
代码语言:javascript复制Expires: Thu, 10 Dec 2015 23:21:37 GMT
在此日期之前,客户端都会认为缓存是有效的,第二次请求,浏览器不会连接服务器,直接从本地缓存中读取,比如下图:
不过 Expires 有缺点,比如说,服务端和客户端的时间设置可能不同,这就会使缓存的失效可能并不能精确的按服务器的预期进行。
第二种是 Cache-Control,比如:
代码语言:javascript复制Cache-Control: max-age=3600
这里声明的是一个相对的秒数,表示从现在起,3600秒内缓存都是有效的,这样就避免了服务端和客户端时间不一致的问题。
但是 Cache-Control 是 HTTP1.1 才有的,不适用与 HTTP1.0,而 Expires 既适用于 HTTP1.0,也适用于 HTTP1.1,所以说在大多数情况下同时发送这两个头会是一个更好的选择,当客户端两种头都能解析的时候,会优先使用 Cache-Control。
条件请求
Last-Modified / If-Modified-Since
在浏览器第一次请求某一个 URL 时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个 Last-Modified 的属性标记此文件在服务期端最后被修改的时间,格式类似这样:
代码语言:javascript复制Last-Modified: Mon, 30 Nov 2015 23:21:37 GMT
浏览器第二次请求此 URL 时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:
代码语言:javascript复制If-Modified-Since: Mon, 30 Nov 2015 23:21:37 GMT
如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。
ETag / If-None-Match
HTTP 协议规格说明定义 ETag 为“被请求变量的实体值”。 服务器单独负责判断记号是什么及其含义,并在 HTTP 响应头中将其传送到客户端,以下是服务器端返回的格式:
代码语言:javascript复制ETag: "d41d8cd98f00b204e9800998ecf8427e"
客户端的查询更新格式是这样的:
代码语言:javascript复制If-None-Match: W/"d41d8cd98f00b204e9800998ecf8427e"
如果ETag没改变,则返回状态304,内容为空,这也和Last-Modified一样。
如何使用 Last-Modified 和 Etags 如何帮助提高性能?
开发者会把 Last-Modified 和 ETags 请求的 HTTP 报头一起使用,这样可利用客户端(例如浏览器)的缓存。因为服务器首先产生 Last-Modified/Etag 标记,服务器可在稍后使用它来判断页面是否已经被修改。本质上,客户端通过将该记号传回服务器要求服务器验证其缓存是否过期。