博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器的缓存策略详解
阅读量:5891 次
发布时间:2019-06-19

本文共 2191 字,大约阅读时间需要 7 分钟。

前端缓存策略:

已开始生产的项目,用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新,客户端也没有必要每次都去服务器端拉取数据,占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以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.

6、Last-Modified和Etag

注意:分布式系统里多台机器间文件的last-modified必须保持一致,以免负载均衡到不同机器导致比对失败,分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样)

Last-Modified和ETags请求的http报头一起使用,服务器首先产生Last-Modified/Etag标记,服务器可在稍后使用它来判断页面是否已经被修改,来决定文件是否继续缓存

7、Cache-Control:max-age=秒 和 Expries

Expries = 时间,HTTP 1.0 版本,缓存的时间,允许客户端在这个时间段之内不去检查(发送请求)

maax-age = 秒,HTTP 1.1版本,资源在本地缓存多少秒

如果max-age 和 Expries 同时存在,则被Cache-Control:max-age覆盖。

Expires 的一个缺点就是,返回的到期时间是服务器端的时间,这样存在一个问题,如果客户端的时间与服务器的时间相差很大,那么误差就很大,所以在HTTP 1.1版开始,使用Cache-Control: max-age=秒替代。

Expires =max-age +   “每次下载时的当前的request时间”

所以一旦重新下载的页面后,expires就重新计算一次,但last-modified不会变化 .

 

二、过程

1.客户端请求一个页面(A)。

2.服务器返回页面A,并在给A加上一个Last-Modified/ETag。

3.客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。

4.客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。

5.服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。

具体事例请看:

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/wsxiao/blog/3044121

你可能感兴趣的文章
hive中如何把13位转化为时间_sqoop1 导入 hive parquet 表中 时间戳调整为日期
查看>>
mysql书外键_[转] mysql 外键(Foreign Key)的详解和实例
查看>>
mysql存储引擎模式_MySQL存储引擎
查看>>
python入门小游戏代码_【Python】Python代码实现“FlappyBird”小游戏
查看>>
mysql 5.5.57互为主从_MYSQL 5.5.18 互为主从配置成功
查看>>
mysql5002_mysql新手进阶02
查看>>
python类 del_全面了解Python类的内置方法
查看>>
前后端传图片用base64好吗_前后端分离 前台传base64的图片 tp5.1.1进行处理
查看>>
java对象的排序_Java对象排序两种方法
查看>>
java jni 原理_使用JNI技术实现Java和C++的交互
查看>>
java 重写system.out_重写System.out.println(String x)方法
查看>>
Ubuntu 12.04安装
查看>>
mysql client命令行选项
查看>>
vc遍历网页表单并自动填写提交 .
查看>>
配置ORACLE 11g绿色版客户端和PLSQL远程连接环境
查看>>
ASP.NET中 DataList(数据列表)的使用前台绑定
查看>>
Linux学习之CentOS(八)--Linux系统的分区概念
查看>>
主域控制器的安装与配置步骤与方法
查看>>
JavaScript---事件
查看>>
Android NDK入门实例 计算斐波那契数列一生成jni头文件
查看>>