前端缓存知识
Posted 前端未来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端缓存知识相关的知识，希望对你有一定的参考价值。
缓存对于前端来说尤其重要，搞清楚缓存，有利于前端做性能调优。
缓存方法分为：强缓存和协商缓存
缓存位置分为：Service-Worker、Memory Cache、Disk Cache
缓存还包括路由缓存、DNS缓存、CDN缓存、服务器缓存等；
先简单给大家画一个思维导图：
这张图可以清晰的看懂存储、强缓存、协商缓存、存储位置的概念。
缓存分为强缓存和协商缓存。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时，如若缓存命中，则直接使用缓存数据库中的数据，不再进行缓存协商。
一、强缓存（不经过服务器）
Expires
Pragma
Cache-Control
Expires
Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。
缺点：
但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差。
Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。
Pragma(Http1.0)
忽略，基本不用.
Cache-Control
private：客户端可以缓存
public：客户端和服务端都可以缓存
max-age：缓存在固定时间内失效
no-cache：需要使用用协商缓存来验证缓存数据
no-store：所有数据都不缓存
大家应该都知道，第一次访问网站时，会去服务器拉取静态资源，返回200.刷新后，第二次访问就会变成from memory cache. 实际上是从内存中获取，当然也有一些资源会from disk cache.这种基于缓存读取数据都是毫秒级别，打开速度就非常快。
注：
no-cache不是不缓存，是可以缓存，但是需要到服务端进行验证，实际上是协商缓存。
如果Expires和Cache-Control同时存在，则优先使用Cache-Control。
二、协商缓存（经过服务器）
协商缓存需要进行对比判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。
相关属性介绍：
Last-Modified：服务器在响应请求时，会告诉浏览器资源的最后修改时间。
if-Modified-Since：浏览器再次请求服务器的时候，请求头会包含此字段，后面跟着在缓存中获得的最后修改时间。服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，如果一致则返回304和响应报文头，浏览器只需要从缓存中获取信息即可。
if-Unmodified-Since：从某个时间点算起, 是否文件没有被修改，使用的是相对时间，不需要关心客户端和服务端的时间偏差。
如果没有被修改：则开始`继续'传送文件，服务器返回: 200 OK
如果文件被修改：则不传输，服务器返回: 412 Precondition failed (预处理错误)
Etag：服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）
If-Match：条件请求，携带上一次请求中资源的ETag，服务器根据这个字段判断文件是否有新的修改
If-None-Match：再次请求服务器时，浏览器的请求报文头部会包含此字段，后面的值为在缓存中获取的标识。服务器接收到次报文后发现If-None-Match则与被请求资源的唯一标识进行对比。
不同，说明资源被改动过，则响应整个资源内容，返回状态码200。
相同，说明资源无修改，则响应header，浏览器直接从缓存中获取数据信息。返回状态码304.
说明：实际应用中Etag是使用算法计算得出的，而算法会占用服务端计算的资源，所有服务端的资源都是宝贵的，所以就很少使用Etag了。
F5就是告诉浏览器，别偷懒，好歹去服务器看看这个文件是否有过期了。于是浏览器就发送一个请求带上If-Modify-since。
Ctrl+F5告诉浏览器，你先把你缓存中的这个文件给我删了，然后再去服务器请求个完整的资源文件下来。于是客户端就完成了强行更新的操作。
关注前端，关注未来，我是你的前端小帮手：前端未来
以上是关于前端缓存知识的主要内容，如果未能解决你的问题，请参考以下文章