盒子
盒子
文章目录
  1. 什么是浏览器缓存
  2. 缓存位置
    1. Service Worker
    2. Memory Cache
    3. Disk Cache
    4. Push Cache
  3. 缓存策略
    1. 强缓存
    2. 协商缓存
  4. 实际场景

浏览器缓存机制

什么是浏览器缓存

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

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

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

缓存位置

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

  • 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中的expirescache-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中引入的文件名发生改变之后才会去请求新的代码文件,否则就会一直使用缓存。

个人微信公众号

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集