浏览器缓存策略

!!!!自己学习理解用,仅供参考!!!!

浏览器缓存策略分为两种 强缓存(本地缓存) 和 协商缓存(弱缓存)。
浏览器在发请求前,先检查强缓存,若没有需要的内容(未命中),则发起请求判断是否需要用弱缓存。

1、简单的概括

强缓存是不发起请求,直接使用缓存内的内容的。浏览器将jscssimagefont-family等存到内存(存小文件)或者磁盘(存大文件)中,下次用户再访问的时候就从内存中取,以便提升性能。
协商缓存需要往后台发请求, 通过判断来决定是使用协商缓存。如果请求内容没发生变化,则请求返回304(服务器收到请求,但内容无变化),浏览器就用缓存内的内容。

2、强缓存如何触发

http1.0 使用 Expires 响应标头

如果服务器返回的响应标头中包含Expires(时间戳),那么客户端发起请求的时间在Expires之前的话,就触发强缓存。

http1.1 使用 Cache-Control 响应标头

同样是服务器返回的一个响应标头, 提供一些配置选项,其优先级比Expires高。(来源:百度百科)

cache-control.png

常用的配置就是 publicprivatemax-age。 下面这个例子是从某个网站的请求中copy来的,仅供参考。

  cache-control: 'private, must-revalidate, no-cache, no-store, max-age=0, post-check=0, pre-check=0'

3、协商缓存怎么触发

http1.0 使用 请求头:If-Modified-Since , 响应头:Last-Modified

服务器在上一次响应请求时,返回一个带Last-Modified的响应头,值为一个时间戳,表示该资源最后一次在服务器修改的时间。当客户端再一次请求这个资源的时候, 请求头就会带上If-Modified-Since,值为上次服务器发来的Last-Modified, 服务器收到后,就和该资源最后修改时间比对, 没变化就返回304, 触发协商缓存。
弊端: 时间间隔最小为1s,如果请求的资源在1s内发生了改变,是可能会触发协商缓存的, 导致无法获取到最新的资源。

http1.1 使用 请求头:If-None-Match , 响应头: Etag

为解决间隔最小1s的问题, If-None-MatchEtag就诞生了。 Etag是由服务器生成的, 是每个资源的唯一标识字符串, 随资源变化而改变。 判断过程和http1.0的一致,请求的时候携带 If-None-Match,然后服务器比较这两个值,没变化就返回304, 触发协商缓存。
弊端: 占用服务器资源较多, 虽然准确度高,但是性能上不如Last-Modified & If-Modified-Since的方法。不过实际的影响不会很大, 基本上可以忽略不计。

补充

即便我们没有配置缓存策略,浏览器也会采用自己的算法来缓存资源。

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

推荐阅读更多精彩内容

  • 今天看奇舞团推了篇文章讲缓存策略的,讲的挺不错,记录一下。 原文地址就在下面。 总结: 缓存分为强缓存和协商缓存...
    NowhereToRun阅读 4,803评论 1 7
  • 关于缓存策略 自动化的缓存机制(基于服务端和客户端协商的) 分级缓存策略(3层):(1层)200状态 : 当浏览器...
    达文西_Huong阅读 228评论 0 0
  • 在前端开发中,性能一直是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速...
    meow_possion阅读 1,413评论 0 0
  • 最近在对项目做 IE 11 兼容,由 IE 的缓存问题,引发我对于浏览器缓存策略的思考。 缓存类型 web缓存主要...
    丶chlorine阅读 812评论 0 1
  • 今天的主题让我想起了过去的无知和愚蠢,不过谁不是一点点进步的了~ 有一次,向开发提了一个web端的bug,回归后还...
    最爱西红柿阅读 386评论 0 0