浏览器的缓存策略详解

最新推荐文章于 2024-04-19 10:18:52 发布

weixin_33739523

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量89

点赞数

文章标签：前端运维 ViewUI

原文链接：https://my.oschina.net/wsxiao/blog/3044121

版权

前端缓存策略：

已开始生产的项目，用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新，客户端也没有必要每次都去服务器端拉取数据，占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以nginx配置为例(前提，已对nginx有基本的了解)。

如何配置，请看下一篇《nginx缓存配置》

一、介绍

1、Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态码会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记（在HttpReponse Header），此文件在服务器端最后被修改的时间。

客户端第二次请求此URL的时，根据HTTP协议的规定，浏览器会向服务器询问是否被修改过(If-Modified-Since在HttpRequest Header)

如果服务器端的资源没有变化，则自动返回HTTP状态码为304（NotChanged）内容为空,这样就节省了传输量，节省了带宽。当服务器端代码发生变化或重启服务器时，则重新发送资源，如第一次请求时返回数据一样。

2、ETag

Http协议说明定义EFlag为“被请求变量的实体标记”，及服务器响应时会给URL做标记，并在HttpReponse Header返回给客户端。同样，如果Etag没有变，返回状态码为304。

当下次需要发Request索要同一个URI的时候，浏览器同时发出一个If-None-Match报头(Http RequestHeader)此时包头中信息包含上次访问得到的Etag。

If-None-Match:“5d8c72a5edda8d6a:3239“

,这样，Client端等于Cache了两份，服务器端就会比对2者的ETag。如果If-None-Match为False，不返回200，返回304(Not Modified) Response。

3、Expries

缓存有效期。用于控制请求文件的有效时间，当请求数据在有效期内客户端获取数据是从缓存请求数据而不是从服务器。当缓存时间过期后，才从服务器更新数据。

4、Last-Modified和Expires

Last-Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所以，Last-Modified还是要用的，而且要和Expires一起用。

5、Etag和Expires

如果服务器端同时设置了Etag和Expires时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.