浏览器缓存机制

什么是浏览器缓存

浏览器通常会将常用资源缓存在个人电脑的磁盘和内存中。

缓存是性能优化中简单高效的一种优化方式，它可以显著减少网络传输所带来的损耗。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以在第一和第三个步骤汇总优化性能。比如说，直接使用缓存而不发起请求，或者发起请求但后端存储和前端一致，就没有必要再将数据回传回来，这样就减少了相应数据。

缓存位置

从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会请求网络。

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

Service Worker

Service Worker是运行在浏览器背后的独立进程，一般可以用来实现缓存功能。

在使用Service Worker的时候，由于涉及到请求拦截，所以传输协议必须使用https保障安全。Service Worker的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由决定缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

如果Service Worker没有命中缓存，我们会根据缓存查找优先级去查找数据。但是不管是在Memory Cache中还是网络请求中获取的数据，浏览器都会显示我们是从Service Cache获取的数据。

Memory Cache

Memory Cache就是内存缓存，主要包含当前页面中已经抓取到的资源。比如，页面上已经下载的样式、脚本、图片等。读取内存中的缓存比磁盘中的要快，但是缓存持续性很短，会随着进程的释放而释放。

计算机中的内存比磁盘小很多，所以无法存储大量数据。

Disk Cache

Disk Cache就是存储在硬盘中的缓存，虽然读取速度比较慢，但优点在于容量和存储时效性。

在所有浏览器缓存中，Disk Cache覆盖面基本是最大的。它会根据http Header中的字段判断哪些需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。

哪些文件缓存在内存中，哪些文件缓存在磁盘中？ 网上比较靠谱的说法：大文件大概率不存储在内存中，而当系统内存使用率高的话，文件优先存储进硬盘。

Push Cache

Push Cache就是推送缓存，是HTTP/2中的内容，当以上三种缓存都没有命中时，才会使用这种。它只在会话（session）中存在，一旦会话结束就会被释放，并且缓存时间也短。

网上kiang来的结论：

• 所有的资源都能被推送，并且能够被缓存，但是Edge和Safari浏览器支持相对较差。
• 可以推送no-cache（需要协商缓存）和no-store（禁止使用缓存）的资源。
• 一旦连接被关闭，Push Cache就被释放。
• 多个页面可以使用同一个HTTP/2连接，也就是可以使用同一个Push Cache。
• Push Cache中的缓存只能被使用一次。
• 浏览器可以拒绝接受已经存在的资源推送。
• 可以给其他域名推送资源。

如果四种缓存都没有命中，只能发起网络请求获取数据了。

缓存策略

通常浏览器的缓存策略分为两类：强缓存和协商缓存，并且缓存策略都是通过设置http Header字段实现的。

强缓存

主要是根据header中的expires和cache-control：

• expires的值是一个绝对时间的GMT格式的时间字符串。缺点是当服务器和客户端时间偏差较大是，就会导致缓存混乱。
• cache-control主要是其中的max-age值来判断，这是一个相对时间。

cache-control和expires可以在配置服务器端的时候同时使用，这时cache-control的优先级高。

协商缓存

当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据header中的部分信息判断是否命中缓存。如果命中，返回304。

协商缓存主要根据的是header中的Last-Modified/If-Modify-Since和Etag/If-None-Match：

• Last-Modified/if-Modify-Since表示该资源的最后修改时间。但是这其中有一些缺陷，如果文件改动很频繁（在1秒改动了n次）该字段不会发生变化；如果文件是周期性变化的，除时间外没有发生任何改动，但这个文件还是被认为改动了。
• Etag/If-None-Match可以保证每个资源是唯一的。

Last-Modified可以与Etag一起使用，服务器会优先验证Etag，一致的情况下才会对比Last-Modified，最后才决定是否返回304。

实际场景

1、频繁变动的资源

对于频繁变动的资源，首先要是用Cache-Control: no-store使浏览器不使用缓存，从而每次都请求服务器。然后配合Etag或者Last-Modified来验证资源是否有效。

2、不常变动的资源

HTML文件一般不缓存或缓存时间很短，所以这里的文件指的是除HTML文件以外的代码文件。

当我们对打包工具打包代码时，文件名就会被进行哈希处理，只有文件被修改时才会生成新的文件名。这样我们就可以给代码文件设置缓存有效期一年Cache-Control: max-age=31536000，这样只有当HTML中引入的文件名发生改变之后才会去请求新的代码文件，否则就会一直使用缓存。