Http304与浏览器缓存

定义

在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+当前下载时间

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 转载:浏览器缓存知识小结及应用 阅读目录 1. 浏览器缓存基本认识 2. 强缓存的原理 3. 强缓存的管理 4. ...
    meng_philip123阅读 1,086评论 4 18
  • 浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可...
    单纯的土豆阅读 405评论 0 1
  • 浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可...
    Www刘阅读 565评论 0 1
  • API定义规范 本规范设计基于如下使用场景: 请求频率不是非常高:如果产品的使用周期内请求频率非常高,建议使用双通...
    有涯逐无涯阅读 2,519评论 0 6
  • 上一章内容看这里(๑• . •๑) 以撒 -1- 以撒娶利百加时正好四十岁。他因利百加不能生育,向上帝求告。上帝应...
    心晴夜明阅读 5,291评论 1 3