理解缓存

背景:

H5页面在app中遇到了缓存问题,现象是页面一直加载打不开,有的手机清除缓存可以打开,有的需要卸载,都是ios,概率较小。发现问题不知道如何排查,于是学习和前端相关的缓存内容。

1.客户端 & webview的缓存

ios端回复:原生没有在代码中写和缓存相关的东西,只是配置了启用缓存,一分钟后过期,过期后会清理html,不会清理js。由此推测:缓存是浏览器产生的,那和浏览器相关的缓存都有哪些?


2.浏览器-html页面和http接口缓存

Q:缓存在做什么?
A:缓存读取是浏览器在向服务器发送请求资源之前,先查询一下本地缓存中是否存在需要的资源,如果存在,那便优先从缓存中读取。当缓存不存在或者过期,再向服务器发送请求。

html中http-equiv属性设置.png
get请求头的cache-control属性设置.png

其中cache-control与pragma属性一致,都是http的缓存策略。pragma是HTTP/1.0标准,基本只用于IE

A:具体cache-control都有哪些属性?
Q1: MDN-HTTP
Q2:生动的例子

A:缓存存在哪里?
Q:Memory Cache—内存的缓存、Disk Cache—硬盘的缓存

A:实际场景运用?
Q:频繁变动的资源—Cache-Control: no-cache、不常变化的资源—Cache-Control: max-age=31536000(一年)

\color{#f38}{权重:}http请求头缓存设置 > html文档http-equiv属性设置
\color{#f38}{tip:}设置了最大缓存时间,但为了解决更新的问题,就需要在文件名或url中添加 hash、 版本号、时间戳等动态字符,从而达到更改引用 URL 的目的,让之前的强制缓存失效


3.CDN缓存

关键字:内容的储存和分发 / 静态资源 / 遵守http标准协议

当Cache-Control设置了public,表示它既可以存在共享缓存,也可以被存在本地缓存,共享缓存,指客户端和服务器之间的缓存,即CDN


凑合看吧.png

举几个栗子

Cache-Control: public max-age=3600 
//本地缓存和 CDN 缓存均缓存 1 小时;
Cache-Control: private immutable
//不能缓存在 CDN,只能缓存在本地。并且一旦被缓存了,则不能被更新;
Cache-Control:no-store
//不能缓存
Cache-Control: no-cache 
//协商缓存。
Cache-Control: public max-age=3600 s-maxage=7200 
//本地缓存 1 小时,CDN 上缓存 2 小时;
Cache-Control: public max-age=3600 proxy-revalidate  
//本地和 CDN 均缓存 1 小时。但如果CDN收到请求,要向服务器确认缓存是否是最新内容。
4.浏览器DNS缓存

关键字:域名系统协议

凑合看吧2.png

浏览器会在本地会建立一个DNS缓存,在一段时间里,都是使用本地的缓存映射,从而减少向运营商DNS服务器查找和解析的时间。

各个浏览器的dns缓存时间,会有一定的差别。
在chrome浏览器中查看dns的缓存时间的方式:chrome://net-internals/#dns

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

推荐阅读更多精彩内容

  • 网络特有的延迟以及数据传输的成本,制约互联网快速获取Web资源。为此,HTTP协议引入缓存以空间换时间,使浏览器缓...
    大头8086阅读 3,070评论 2 12
  • 解析URL 输入URL后,会进行解析(URL的本质就是统一资源定位符) URL一般包括几大部分: protocol...
    小超人的前端之路阅读 758评论 0 1
  • 浏览器对于请求资源, 流程如图所示: 可以看到浏览器的缓存机制分为两个部分: 1、当前缓存是否过期? 2、服务器中...
    zhoulujun阅读 1,206评论 0 3
  • 是中国的传统节日,举国欢庆,万家团圆,共度美好佳节。 春节还没到,许多人都捺不住自...
    森林_3990阅读 173评论 0 0
  • 外婆家有一只叫做健健的可爱小猫咪,还有一只叫做菠萝的可爱小狗,我非常喜欢它们。 这只小狗的名字叫菠...
    阳光成子阅读 170评论 0 2