浏览器缓存

缓存

HTTP header 缓存工作原理

  1. 浏览器发起请求的时候,根据请求头的 expresscache-control 来判断是否命中强缓存,如果是,怎直接从缓存读取资源,不会发起请求。
  2. 如果没有命中强缓存,浏览器会发起一个请求到服务端,并通过 last-modified If-modified-sinceetag if-none-match 判断资源是否命中协商缓存,如果命中, 不会 中断请求,服务器会将这个请求返回(304),但是不会返回资源,资源会从缓存中读取。
  3. 如果没有命中缓存,则发起请求,直接从服务器加载资源。
1
2
3
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

数据缓存

  • cookie:4kb,可以手动设置过期时间
  • localStorage:5M,不手动清除一直存在,可以跨标签访问
  • sessionStorage:5M,不可以跨标签访问,窗口回话结束自己清除
  • indexDB:浏览器数据库,无限容量,除非手动清除,否则一直存在
  • webSQL:关系数据库,废弃
文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/浏览器缓存.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 平凡的生活,不平凡的人生
支付宝
微信打赏