浏览器原理-浏览器缓存和本地存储篇

原文地址

浏览器原理-浏览器缓存和本地存储篇

github

大家好,我是林一一,这是一篇关于浏览器 缓存原理 和 本地存储 的文章,后续回持续推出关于,浏览器原理的文章。

一、浏览器的缓存篇

思维导图

思维导图.png

所谓浏览器的缓存,就是浏览器通过 HTTP 请求网络资源后将资源留在本地的一种行为。在页面上点击 返回和前进的按钮 就是利用浏览器的缓存。

  • 浏览器的缓存分为两种 强缓存协商缓存
  • 浏览器缓存资源的位置放置四个地方 Service Worker, Memory Cache, Disk Cache, Push CacheService Worker 优先级最高到 Push Cache

浏览器请求资源过程

先本地再服务器(先强缓存再协商缓存)

  • 浏览器请求资源时会先去判断本地缓存资源的 header 是否有命中强缓存,如果命中强缓存则直接请求本地的资源,不向服务器发送请求。
  • 如果没有命中强缓存或强缓存失效以后就会发送 HTTP请求服务器,这个过程采用的就是协商缓存

简单的说浏览器的缓存请求分为有无 HTTP 请求两种。

强缓存

所谓的强缓存是我们没有发送 HTTP 请求,而是直接从本地缓存中获取资源的一种行为。成功后返回状态码 200。

  • 浏览器是根据响应头的 headers 字段判断 Expires/http1.0Cache-Control/http1.1,来执行强缓存的过程。
  • 没有或失效的强缓存,浏览器会向服务器发送请求资源。

Expires

http1.0 中一个页面的缓存字段,是一个格林时间。这个时间是浏览器强缓存资源失效的时间

Expires: Wed, 22 Nov 2021 08:41:00 GMT

上面的表示缓存的资源会在 2021年11月22号8点41分 过期。

  • 缺点:浏览器是根据本地的时间判断资源是否过期的,但是本地的时间可以被修改,所以在HTTP1.1Expires 被放弃了。

Cache-Control

强缓存.jpg

HTTP1.1 中页面的缓存字段。 如果 Expires和Cache-Control 都存在,那么Cache-Control的优先级更高。

  • Cache-Control 的属性值有很多,其中属性 max-age 表示,一个相对的缓存时间
Cache-Control: max-age = 3600

表示距离上次请求的一小时内可以直接使用本地的缓存。不需要再次请求。

  • 属性 public 表示可以被浏览器或代理服务器缓存。
  • 属性 private 表示只能被浏览器缓存。
  • 属性 no-cache 需要发送请求到服务器确认是否被缓存,这需要使用到协商缓存。
  • 属性 no-store 表示禁止使用缓存,每一次都需要请求服务器。

协商缓存

所谓协商缓存是指:浏览器携带缓存的标识 tag向服务器发送请求,服务器更具携带过来的标识判断是否使用缓存的这个过程就是 协商缓存

  • 浏览器请求服务器返回的结果有两种,一种 304 表示服务器的资源还没有更新直接使用浏览器本地的缓存即可。另一种返回 200,表示服务器资源更新且携带新的资源返回给浏览器。
  • 缓存标识 tag 分成两种 Last-Modified/If-Modified-SinceETag/If-None-MatchEtag / If-None-Match 的优先级高于 Last-Modified

Etag / If-None-Match

Etag.jpg
  • Etag 时服务器响应请求时 返回的一个唯一标识。这个标识只能由服务器产生。
etag: W/"5357d2b3f63545926812b95658505315"
  • If-None-Match 时浏览器再次请求服务器时,会携带 Etag 标识值发送给服务器,服务器会将这个值和在服务器中的Etag比较,两个值相等那么返回304,如果不相等就返回 200 将新的资源返回。

Last-Modified/If-Modified-Since

  • Last-Modified,指的是返回请求的资源文件最后在服务器被修改的时间。
Last-Modified: Wed, 23 Nov 2021 08:41:00 GMT
  • If-Modified-Since,是浏览器再次请求资源时,会携带上一次返回的 Last-Modified 的时间发送给服务器。服务器将上一次最后修改的时间 和现在的最后修改的时间做对比。如果大于If-Modified-Since 的值,服务器就会返回新的资源 200,否则返回 304

缓存位置

浏览器缓存位置.jpg

上面提到过缓存的位置 Service Worker, Memory Cache, Disk Cache, Push CacheService Worker 优先级最高到 Push Cache

  • Service Worker 运行在浏览器的独立线程可以实现浏览器的缓存功能,传输协议需要使用HTTPS
  • Memory Cache 是将资源缓存在内存中。
  • Disk Cache 是将资源缓存在磁盘中
  • Push Cache(推送缓存)是 HTTP/2 中,存活在会话session中,存活的时间很短。

二、浏览器的本地缓存篇

浏览器的本地缓存主要分为 5 种,localStorage, sessionStorage, cookie, WebSql, indexedDB

cookie

cookie 是服务器生成的,保存到浏览器的一个本地文件中。前端可以通过 Set-Cookie 设置 cookie,前端可以设置多个 Set-Cookie

  • cookie 可以设置过期的时间也可以不设置时间,浏览器关闭后就会失效。
Set-Cookie: BDSVRTM=7; path=/
Set-Cookie: H_PS_PSSID=34130_34099_33969_31253_33848_33607_26350; path=/; domain=.baidu.com
  • cookie 产生原因:是用来做 状态存储 的,因为 http 是无状态的,不能记录数据状态,cookie 可以记录数据的状态。比如用户的id,密码,浏览过的页面等。
  • cookie 的优点:1. 记住数据的状态,密码等。2. 弥补的 HTTP 的无状态。
  • cookie 的缺点:1. 容量缺陷,只能存储4kb大小;2.安全问题,cookie是以文本的形式在浏览器和服务器之前传递信息,很有可能会被修改。3. 请求的Cookie文件容易被删除。 4. 性能消耗大,cookie 是紧跟域名的,域名下的任意地址被修改都携带cookie到服务器。造成性能浪费。

localStorage

localStorage 存值的方式和 cookie 类似,都会存放在同一个域名下,localStorage 可以长期存储,没有时间的限制。可以通过localStorage.setItem()/getItem() 存取值。

  • localStorage 优点:1.扩展了 cookie 的存储大小,可以存放 5M 大小,不同浏览器不同;2.只存储在浏览器不会和服务器之间有通信解决了cookie 的安全问题和性能消耗问题。
  • localStorage 缺点:1.需要手动删除保存的数据;2.只支持字符串类型,JSON 类型需要通过JSON.stringify() 转化。
  • localStorage 使用场景:利用 localStorage 可以存放一些稳定的资源和base64的图片等

sessionStorage

sessionStorage 和 localStorage 一致,唯一大的区别在于 sessionStorage 是会话级别的存储

  • 会话级别的 sessionStorage 也就是在浏览器页面关闭后,这个存储也就消失了。
  • sessionStorage 的场景:sessionStorage 可以用于保存一些临时的数据,防止页面消失后数据就没了,比如表单填写和用户的浏览器记录等。

indexedDB

浏览器提供的非关系型数据库,indexedDB 提供大量的接口提供查询功能,还能建立查询。

  • 以键值对的形式存储值,包括 js 对象
  • indexedDB 是异步的,存入数据不会导致页面卡顿。
  • indexedDB 支持事务,事务是一系列操作过程中发生了错误,数据库会回退到操作事务之前的状态。
  • 同源限制,不同源的数据库不能访问。
  • 存储空间没有限制。

webSQL

已废弃,旨在通过 js 语句操控 sql 语句完成对数据的读写。

参考

《图解HTTP》

浏览器缓存

前端缓存

本地存储

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

推荐阅读更多精彩内容