浏览器的强缓存和对比缓存，了解一下？
强制缓存 Expires和Cache-Control
对比缓存 Last-Modified和Etags 由服务器判定是否从缓存中获取资源
强制缓存
HTTP/1.0 Expires 缓存
最早使用的是Expires字段，该字段表示缓存到期时间，即有效时间+当时服务器的时间，然后将这个时间设置在header中返回给服务器
在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。
但是，这个字段设置时有缺点：
由于是绝对时间，用户可能会将客户端本地的时间进行修改，而导致浏览器判断缓存失效，重新请求该资源，同时，还导致客户端与服务端的时间不一致，致使缓存失效。
HTTP/1.1 Cache-Control
已知Expires的缺点之后，在HTTP/1.1中，增加了一个字段Cache-Control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求。
这两者的区别就是前者是绝对时间，而后者是相对时间
Cache-Control: max-age=2592000
下面列举一下Cache-Control的字段可以带的值：
max-age：即最大有效时间，在上面的例子中我们可以看到
no-cache：表示没有缓存，即告诉浏览器该资源并没有设置缓存
s-maxage：同max-age，但是仅用于共享缓存，如CDN缓存
public：多用户共享缓存，默认设置
private：不能够多用户共享，HTTP认证之后，字段会自动转换成private。
总结一下，自从http1.1开始，Expires逐渐被Cache-Control取代。Cache-Control是一个相对时间，即使客户端时间发生改变，相对时间也不会随之改变，这样可以保持服务器和客户端的时间一致性。而且Cache-Control的可配置性比较强大。
对比缓存
对比缓存在协议里的字段是Last-Modified和If-Modified-Since、Etag。
对比缓存的过程是，先从缓存中获取对应的数据标识，然后向服务器发送请求，确认数据是否更新，如果更新，则返回新数据和新缓存；反之，则返回304状态码，告知客户端缓存未更新，可继续使用。
Last-Modified
Last-Modified：服务器告知客户端，资源最后一次被修改的时间。
在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间，格式例如：
Last-Modified : Fri, 12 May 2006 18:53:33 GMT
客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头，询问该时间之后文件是否有被修改过：
If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT
第二次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段进行对比，如果相等，则表示未修改，响应304；反之，则表示修改了，响应200状态码，返回数据。
这个字段可以和Cache-Control配合使用。
但是他还是有一定缺陷的：
如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。
Etag
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
以下是服务器端返回的格式：
ETag: "50b1c1d4f775c61:df3"
客户端的查询更新格式是这样的：
If-None-Match: W/"50b1c1d4f775c61:df3"
如果ETag没改变，则返回状态304然后不返回，这也和Last-Modified一样。
Last-Modified和Etags如何帮助提高性能?
聪明的开发者会把Last-Modified 和ETags请求的http报头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生 Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。
以上就是我们常说的浏览器缓存，当然，基本都是服务端配置。缓存的目的是减少请求，减轻服务器的压力，对于小型网站来说也许不是必须的，但是你可以看一下淘宝、京东的网站页面，打开浏览器控制器，就会发现，这是大型网站的必配。
后续还会有前端优化的文章，待续哦！！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
