前端缓存

复习了一下前端常用的缓存相关知识顺便做了一次整理，有错误的地方还请大家多多指教。

1. HTTP缓存

HTTP缓存是第二次请求资源开始的。
第一次请求时，资源正常返回，status为200，浏览器拿到资源的Response Header，其中包含了缓存的参数。
第二次请求时，浏览器先根据参数判断是否击中强缓存，击中则status为200，直接从本地缓存中获取资源。未击中则把Header中有关缓存的参数传给服务器，判断是否击中协商缓存，击中则status为304，仍旧从本地缓存中读取资源，未击中则重新从服务器中获取资源。

1.1 强缓存

与强缓存相关的参数有两个expires和cache-control。如果同时存在，cache-control比expires优先级高。

1.1.1 expires

这是一个GMT格式的时间字符串，例如Mon, 9 Sep 2018 22:30:59 GMT，如果请求的发送时间早于这个时间，则会击中强缓存。

1.1.2 cache-control

max-age=number

这是一个相对时间，单位为秒。以第一次请求的时间为准，加上max-age得出一个过期时间。下次请求时间弱小于过期时间则击中强缓存。

no-cache

不使用强缓存，直接向服务器请求，判断是否击中协商缓存。

no-store

禁止使用缓存，每次都向服务器重新请求资源。

public

可以被浏览器和CDN等中间代理服务器缓存。

private

只能被浏览器缓存，不能被中间代理服务器缓存。

1.2 协商缓存

两组成对出现的header，第一次请求时服务器的响应头有Last-Modified或Etag，之后浏览器再发送请求时会带上If-Modified-Since或If-None-Match。

1.2.1 Last-Modified和If-Modified-Since

第一次请求时服务器的响应头有Last-Modified，这是服务器上这个文件的最后修改时间，浏览器第二次请求时会带上If-Modified-Since，这个的值就是第一次收到的Last-Modified的值。
服务器在收到请求时会判断If-Modified-Since是否和服务器上文件的最后修改时间相同，相同则击中协商缓存，返回304，浏览器从本地缓存加载资源。如果没命中，则服务器重新返回新的资源并加上新的Last-Modified。

1.2.2 Etag和If-None-Match

Etag是服务器资源的唯一标识字符串，服务器上的资源一旦修改则会变化，使用流程和Last-Modified相同。两者同时使用时，Etag优先级高。
Etag可用于文件修改特别频繁的情况下，比如1秒修改N次，而Last-Modified只能追踪到秒级别。

1.3 主动让强缓存重新加载资源

因为强缓存不会发请求到服务器，所以若在周期内服务器上的文件做了修改，用户无法加载到最新的文件。
这时，可以通过修改页面中资源路径的形式，让浏览器主动加载新的资源。
例如：href=”test.css?v=1.0.1”

2. 浏览器缓存

项目	描述
cookies	容量4kb，浏览器每次发送请求时都会传递cookies给服务器，可以设置过期时间。
SessionStorage	容量5MB，当页面被关闭时会清除。
LocalStorage	容量5MB，永久存储。存储形式是字符串，如果需要存储对象，需要使用JSON.stringify()将对象变成字符串，使用时再用JSON.parse()将字符串转换回对象。
IndexDB	容量50MB，永久存储。

前端缓存相关