浏览器缓存

Web 缓存大致可以分为：**数据库缓存、服务器端缓存（**代理服务器缓存、CDN 缓存）、浏览器缓存。

浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。

indexDB

一般**>=250M**，并且用户清除浏览器缓存时不会将其清除。支持事务、异步的 、同源限制、支持二进制储存。
流程：打开数据库，然后创建库表，然后可以增删改查操作。

http缓存

概念

http缓存就是在浏览器从服务端拿到请求的资源，通过缓存规则保存在浏览器本地，二次请求的时候不再从服务端获取，而是直接从本地获取缓存资源，降低了服务器压力，提升了加载速度

缓存规则

1、强制缓存

首次请求服务端资源时，服务端会在Response Headers 中写入缓存时间。当请求再次发出时
　　如果缓存时间内，将直接从缓存获取资源，而不会再与服务器发生通信。
　　如果不在缓存时间内，与服务器发生通信。
Cache-Control：Cache-Control 是 Expires（已废弃） 的替代方案，可以有几个值：
max-age : 单位秒，缓存在这个max-age最大时间内有效
no-cache：跳过强制缓存，采用协商缓存
no-store：完全不缓存

2、协商缓存

协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求，还是从本地获取缓存的资源。
两个控制字段：
Last-Modified：标识的是资源在服务器上的最后修改时间，当第一次请求的时候，服务会返回 Last-Modified ，当再次请求的时候请求头会带上 If-Modified-Since：xx(第一次请求返回的 Last- Modified的值)，服务器会对比资源在最后修改时间之后是否有变动，有则返回新的资源，没有则返回 304
Etag：Etag 是由服务器为每个资源生成的唯一的标识字符串，当第一次请求的时候，服务会返回 Etag 值 ，当再次请求的时候请求头会带上 if-None-Match：xx(第一次请求返回的 Etag 的值)，这个标识字符串是基于文件内容编码的，只要文件内容不同它们对应的 Etag 就是不同的，因此 Etag 能够精准地感知文件的变化，Etage也是Last-Modified的替代方案

缓存读取

from memory cache代表使用内存中的缓存（快速读取和时效性）
rom disk cache则代表使用的是硬盘中的缓存（I/O）
浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中。所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。