浏览器通常会将常用资源缓存在个人电脑的磁盘和内存中。
缓存是性能优化中简单高效的一种优化方式，它可以显著减少网络传输所带来的损耗。
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以在第一和第三个步骤汇总优化性能。比如说，直接使用缓存而不发起请求，或者发起请求但后端存储和前端一致，就没有必要再将数据回传回来，这样就减少了相应数据。
从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会请求网络。
Service Worker是运行在浏览器背后的独立进程，一般可以用来实现缓存功能。
在使用Service Worker的时候，由于涉及到请求拦截，所以传输协议必须使用https保障安全。Service Worker的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由决定缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
如果Service Worker没有命中缓存，我们会根据缓存查找优先级去查找数据。但是不管是在Memory Cache中还是网络请求中获取的数据，浏览器都会显示我们是从Service Cache获取的数据。
Memory Cache就是内存缓存，主要包含当前页面中已经抓取到的资源。比如，页面上已经下载的样式、脚本、图片等。读取内存中的缓存比磁盘中的要快，但是缓存持续性很短，会随着进程的释放而释放。
计算机中的内存比磁盘小很多，所以无法存储大量数据。
Disk Cache就是存储在硬盘中的缓存，虽然读取速度比较慢，但优点在于容量和存储时效性。
在所有浏览器缓存中，Disk Cache覆盖面基本是最大的。它会根据http Header中的字段判断哪些需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。
哪些文件缓存在内存中，哪些文件缓存在磁盘中？
网上比较靠谱的说法：大文件大概率不存储在内存中，而当系统内存使用率高的话，文件优先存储进硬盘。
Push Cache就是推送缓存，是HTTP/2中的内容，当以上三种缓存都没有命中时，才会使用这种。它只在会话（session）中存在，一旦会话结束就会被释放，并且缓存时间也短。
网上kiang来的结论：
如果四种缓存都没有命中，只能发起网络请求获取数据了。
通常浏览器的缓存策略分为两类：强缓存和协商缓存，并且缓存策略都是通过设置http Header字段实现的。
主要是根据header中的expires和cache-control：
cache-control和expires可以在配置服务器端的时候同时使用，这时cache-control的优先级高。
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据header中的部分信息判断是否命中缓存。如果命中，返回304。
协商缓存主要根据的是header中的Last-Modified/If-Modify-Since和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中引入的文件名发生改变之后才会去请求新的代码文件，否则就会一直使用缓存。
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8