前端面试之浏览器缓存机制

发表于 4年以前 | 总阅读数：394 次

什么是浏览器缓存

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

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

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

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

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