浏览器相关

[licong96]

浏览器缓存

• 强缓存
• 协商缓存
• 缓存位置

强缓存

不需要发送请求。

通过相应的字段来进行检查，HTTP/1.0使用Expires，HTTP/1.1使用Cache-Control。

Expires即过期时间。如果服务器的时间和浏览器的时间不一致，那服务器返回的这个过期时间可能就是不准确的。因此这种方式很快在后来的HTTP1.1版本中被抛弃了。

Cache-Control: max-age=3600，代表这个响应返回后在 3600 秒，也就是一个小时之内可以直接使用缓存。

协商缓存

强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。

这样的缓存tag分为两种: Last-Modified 和 ETag。

Last-Modified：即最后修改时间。

ETag：是服务器根据当前文件的内容，给文件生成的唯一标识，只要里面的内容有改动，这个值就会变。

缓存位置

当强缓存命中或者协商缓存中服务器返回304的时候，我们直接从缓存中获取资源。那这些资源究竟缓存在什么位置呢？

浏览器中的缓存位置一共有四种，按优先级从高到低排列分别是：

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

缓存机制总结

首先通过Cache-Control验证强缓存是否可用。

• 如果强缓存可用，直接使用
• 否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新
  • 若资源更新，返回资源和200状态码
  • 否则，返回304，告诉浏览器直接从缓存获取资源

浏览器的本地存储

• Cookie
• WebStorage
  • localStorage
  • sessionStorage
• IndexedDB

Cookie

Cookie 最开始被设计出来其实并不是来做本地存储的，而是为了弥补HTTP在状态管理上的不足。

因为HTTP 协议是一个无状态协议，所以Cookie 的作用就是用来做状态存储的。

特点和缺陷：

• 容量缺陷。Cookie 的体积上限只有4KB，只能用来存储少量的信息。
• 性能缺陷。Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie。
• 安全缺陷。由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改。另外，在HttpOnly为 false 的情况下，Cookie 信息能直接通过 JS 脚本来读取。

localStorage

特点：

• localStorage 的容量上限为5M，相比于Cookie的 4K 大大增加。
• 只存在客户端，默认不参与与服务端的通信。

localStorage有较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源。

sessionStorage

sessionStorage和localStorage基本相同，只有一个本质的区别，sessionStorage只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。

IndexedDB

IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才WebStorage的 5M 一个量级，理论上这个容量是没有上限的。