js 前端缓存总结

前端缓存分为 HTTP缓存 和 浏览器缓存;
图片引用来源：https://www.jianshu.com/p/256d0873c398

前端用于缓存的关键字段

program, cache-control, expires

都是控制网页缓存的，使用强缓存时，就有限判断缓存是否过期，如果不过期就直接返回。如果过期，就进行协商缓存处理。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- HTTP 1.0 -->
<meta http-equiv="pragma" content="no-cache">
<!-- HTTP 1.1 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- Prevent caching at the proxy server -->
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

last-modified, if-modified-since, etag， if-none-match

last-modified / if-modified-since; etag / if-none-match属于协商缓存。

1、last-modified, if-modified-since

利用时间戳来比较客户端是否有服务器端最新的资源。一般用于静态资源文件，比如图片，文件等。具体流程是：当浏览器第一次请求资源文件时，服务器返回响应时，会把该资源的最后修改时间写到last-modified中给浏览器端；浏览器第二次请求该资源的时候，会把该修改时间通过if-modified-since带回给服务器端；如果时间相等，则返回304；

2、etag,if-none-match

利用资源的唯一标识符比较客户端是否有服务器端的最新的资源。一般用于用于静态数据，动态数据。具体流程是: 当浏览器第一次请求数据时，服务器会根据数据内容，计算出唯一标示值，然后通过etag关键值，把该值传递给浏览器端；当浏览器端第二次请求数据时，浏览器会把该唯一标示，通过if-none-match字段带到服务器端， 服务器端比较两个etag值，如果相等，那么就返回304；

前端缓存的分类

静态资源文件，如图片，文件等

使用last-modified, if-modified-since对比服务器与客户端中存储的文件的时间戳。

静态数据， 比如省市区，性别等

永远使用本地缓存数据，由后端返回id值，在前端通过id获取数据。

动态数据， 比如用户信息

利用etag/if-none-tag来比较该数据计算出来的唯一表示值。如果相等，则表示浏览器端缓存的是最新的数据。

列表数据

未完待续。。。