美文网首页
Http304与浏览器缓存

Http304与浏览器缓存

作者: Arno_z | 来源:发表于2017-08-04 20:20 被阅读0次

定义

在Http请求中,返回代码是304的时候代表的是当前请求内容未发生变化,服务器不会返回网页内容,浏览器直接从缓存加载。

详解

1:在304的请求过程中,有两个header比较重要:if-modified-since 和 if-none-match。当客户端发送请求的时候带上这两个参数之后,服务器会读取当前两个头的值,判断客户端的缓存是否最新:
如果是的话,服务器返回304代码(只有响应头),客户端收到304以后,直接从本地加载对应的资源。
如果不是的话,则返回200代码,并附在最新的内容的响应体。
此时的操作都是通过发送Http请求,然后通过对服务器返回值的判断进行查询是否使用缓存。

2:如果目标是不发送请求,就直接使用本地缓存呢?
此时就需要使用到Cache-Control的设置了:
cache-control分为两个: expires和max-age
expires = 时间,HTTP 1.0 版本,缓存的载止时间,允许客户端在这个时间之前不去检查(发送请求)
max-age = 秒,HTTP 1.1版本,资源在本地缓存多少秒
如果max-age和Expires同时存在,则被Cache-Control的max-age覆盖。在经过设定的缓存时间之后,浏览器会再次发起条件请求。

3:缓存标签的区别
3.1:Expires
定义:http/1.0定义的header,表示资源在一定时间内从浏览器的缓存中获取资源,不需要请求服务器获取资源,从而达到快速获取资源,缓解服务器压力的目的。
格式:Fri, 04 Aug 2017 11:49:43 GMT
应用:可以通过页面的<meta http-equid="Expires" content="Fri, 04 Aug 2017 11:49:43 GMT"来给页面设置缓存时间;对于图片、CSS文件、JS文件等则需要在服务器端配置response的header
3.2:Last-modified
定义:上次修改(时间),通过修改服务器端的文件后再请求,发现response的header中的Last-modified改变了。
格式:Last-Modified:Fri, 04 Aug 2017 11:52:51 GMT
应用:请求的流程如下:浏览器首次请求资源时,服务器返回200代码和内容,然后对应的返回头有一个Last-Modified标签,表示文件的最后修改时间。当浏览器再次请求该资源时,浏览器的请求头会有一个If-Modified-Since标签,格式为If-Modified-Since:time。服务器收到这个头以后,检查对应的资源是否有变化,如果没有则返回304code,响应内容为空。否则如果发生变化,则返回200代码,内容为对应的内容。
3.3:Etag
定义:Http/1.1中增加的header,代表的是当前资源的"签名"
格式:
应用:和Last-Modified类似,浏览器初次请求资源的时候,服务器返回的响应头标签包含对应的Etag,代表当前内容的签名。然后浏览器再次请求当前资源的时候,在请求头中添加If-None-Match的标签,服务器根据对应的资源签名是否发生变化,选择304或者200返回。
3.4:max-age
定义:Cache-Control中设置资源在本地缓存时间的一个值,类似于Expired标签
格式:Max-age:300,单位秒,其他可能值no-cache
应用:指明当前浏览器在多长时间内可以不访问服务器直接加载缓存资源

4:各个标签区别
Last-Modified和Etag
两者都是用来表示当前浏览器的文件与服务器的文件是否相同,都是用来进行条件请求的操作。区别是Last-Modified代表的当前文件的最后修改时间,进行比较的时候是根据时间的异同来判断。Etag是对当前内容的签名,判断的时候是根据浏览器发送的当前文件的签名和当前服务器文件的签名是否相同判断的。
如此看来,两个标签貌似功能是一致的,那为什么需要两个标签呢?主要的问题是Last-Modified存在多个服务器时间不一致的问题,另一个就是如果用旧文件替换新的文件的话那还是检测不出变化,时间精度要求很高。

Expires和max-age
Expires是1.0版本的标签,表示的是当前资源在某个时间点之前不用去向服务器发送请求验证资源是否发生变化;max-age代表的是从当前资源下载时间点开始,经过多长之间之内都不需要发送请求进行资源判断。
Expires和Last-Modified类似,存在服务器时间和浏览器时间不一致的情况。如果两者同时存在,则max-age会改变expires,即expores=max-age+当前下载时间

相关文章

  • Http304与浏览器缓存

    定义 在Http请求中,返回代码是304的时候代表的是当前请求内容未发生变化,服务器不会返回网页内容,浏览器直接从...

  • 了解一下浏览器的协商缓存以及nginx如何配置

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存协商缓存:浏览器会先向服务器确认资源的有效性后...

  • 本地缓存

    浏览器缓存与本地缓存的区别 浏览器缓存: 只服务于单个网页 任何网页都具有网页缓存 不安全,不可靠,不知道网站缓存...

  • 浏览器缓存(http缓存)

    浏览器缓存有两种:强制缓存和协商缓存 浏览器缓存机制 浏览器发送请求,会先从浏览器缓存中查找【请求结果】和【缓存标...

  • 缓存、cookie、token、session、localSto

    一、缓存分类 服务器端缓存(CDN缓存) 客户端缓存(浏览器缓存); 二、浏览器缓存 强缓存:浏览器在加载资源时,...

  • 从URL到页面展示

    浏览器与服务器的交互 在浏览器输入URL 浏览器根据URL查找对应的域名的IP地址,查找顺序浏览器缓存-本机缓存-...

  • js浏览器相关

    缓存 关于缓存的好处与优点就不说了,简单说说浏览器的缓存机制。当浏览器向服务器发起请求时,首先会判断是否有缓存,如...

  • 协商缓存和强缓存

    浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存 浏览器缓存机制浏览器缓存(Brower Ca...

  • DSBD

    1.浏览器缓存 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识 强制缓存优先于协商缓存进...

  • HTTP缓存机制

    web缓存分为:数据库缓存、服务器缓存(代理服务器、cdn缓存)、浏览器缓存浏览器缓存分为:http缓存、inde...

网友评论

      本文标题:Http304与浏览器缓存

      本文链接:https://www.haomeiwen.com/subject/zceblxtx.html