http缓存

http缓存分为强缓存协商缓存

image.png

● 每次发起请求,浏览器都会先在浏览器缓存中查找该请求的结果以及缓存标识。
● 每次拿到请求结果都会将结果和缓存标识存入浏览器缓存中。

强缓存

强缓存就是强制缓存,不需要发送请求到服务端,直接读取浏览器本地缓存

在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ,在 Chrome 中,强制缓存又分为 disk cache (存放在硬盘中)和 memory cache (存放在内存中),存放的位置是由浏览器控制的。

内存缓存(from memory cache):js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取。
硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

Cache-Control

HTTP/1.1 中新增的属性,在请求头和响应头中都可以使用。
常见属性值如有:

  1. max-age:用来设置资源可以缓存多长时间,单位s;
  2. public:指示响应可被任何缓存区缓存;
  3. private:只能针对个人用户,而不能被代理服务器缓存;
  4. no-cache:不使用强缓存,需要与服务器验证,评估缓存响应的有效性;
  5. no-store:禁止一切缓存(这个才是响应不被缓存的意思);
  cache-control: public, max-age=3600

如上响应头,表示则该资源会被缓存(3600秒) 1 小时,在 1 小时内都会从缓存中获取资源直接使用。

Expires

响应头包含日期/时间(GMT时间), 即在此时间之后,响应过期。

 expires: Wed, 21 Oct 2015 07:28:00 GMT

无效的日期,比如 0, 代表着过去的日期,即该资源已经过期。

注意:Expires响应头是一个绝对时间,而Cache-Control是相对时间。

协商缓存

协商缓存就是强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:
● 协商缓存生效,返回304 not modified,告知浏览器缓存可用。
● 协商缓存失效,返回200和数据(可能会更新强缓存,具体看服务器操作)。

控制协商缓存的字段分别有:Last-Modified / If-Modified-SinceEtag/ If-None-Match。其中Etag / If-None-Match的优先级比Last-Modified /If-Modified-Since高。

注意:服务端返回的响应头中得包含Last-Modified或者Etag这两个响应头之一,下次浏览器请求该资源才会带上对应的请求头。

Last-Modified

Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间。

第二次发起请求的时候,请求头会带上上一次响应头中的 Last-Modified的时间,并放到If-Modified-Since 请求头中。服务端根据文件最后一次修改时间和If-Modified-Since的值进行比较。
如果相等则返回 304 ,代表资源无更新,继续使用浏览器缓存文件。
如果服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200。

在Nodejs中,可以通过fs.statSync(path).mtime获取文件的最后修改时间。

注意:Last-Modified是秒级别的,如果在这一秒内多次修改文件则Last-Modified不会改变,浏览器下次请求就会认为资源没有发生变化,这也是为什么会有ETag的原因。

Etag

Etag是服务器响应请求时,返回包含在响应头的当前资源文件的一个唯一标识(由服务端生成)。
If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值。
服务器收到请求后,则会根据If-None-Match的值与该资源在服务器中计算出的Etag值做比较。
如果相等则返回304,代表资源无更新,继续使用浏览器缓存文件。
如果不相等则重新返回资源文件,状态码为200。

优点

缓解服务器端压力,提升性能,优化用户体验。

缺点

强缓存需要设置绝对时间或者相对时间,由于我们无法判断具体多长时间资源会发生变化,就有可能导致资源更新后,该资源还处于缓存期间。
一个比较好的解决方案是:改变资源后给资源加上一个哈希路径,同时把引用该资源的路径改为变更后的路径,让浏览器主动放弃缓存,加载新资源。当然,如果用户没有刷新页面,还是会用旧的资源。

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

推荐阅读更多精彩内容