浏览器缓存机制(一):概述

241 阅读2分钟

前言

image.png

浏览器缓存机制按照缓存位置可以划分为:

  1. Memory Cache
  2. Service Worker Cache
  3. Disk Cache
  4. Push Cache

Memory Cache

什么资源会被存到内存里?对此没有特定的规则。但一般来讲,浏览器秉承的是“节约原则”。

比如,Base64 格式的图片,基本是在 memory cache里;
此外,体积不大的 JS、CSS 文件,也有较大地被写入内存的几率,而较大的 JS、CSS 文件往往被直接甩进磁盘。

Service Worker Cache

Service Worker

Service Worker 是一种独立于主线程之外的 Javascript 线程。脱离于浏览器窗体,因此无法直接访问 DOM。

这样独立的个性使得 Service Worker 的“个人行为”无法干扰页面的性能,这个“幕后工作者”可以帮我们实现离线缓存、消息推送和网络代理等功能。

借助 Service worker 实现的离线缓存就称为 Service Worker Cache。

PWA(Progressive Web Apps)

网页离线可用的原理:监听fetch事件拦截网络请求并从缓存中获取资源。

Service Worker 在传统网页中的使用也正是渐进增强手段的体现,使用PWA方案能够在一定程度上优化交互体验,比如twitter使用了PWA方案之后,用户驻留数据得到极大提升。

HTTP Cache

缓存机制之HTTP缓存

Push Cache

缓存的获取顺序

内存缓存>磁盘缓存>网络请求(http缓存)

缓存存储优先级

image.png 不同的资源,浏览器会将其缓存在不同的位置。且内存里读取资源会比磁盘里读取速度更快。存储优先级没有什么特定的规则,但是可以根据经验得出以下结论:

  • base64的图片:内存缓存
  • CSS资源:磁盘缓存(CSS文件加载一次就可渲染出来,不会频繁读取它,所以不适合缓存到内存里)
  • JS文件或图片资源(非base64):取决于加载的时间
  • 其他:大部分放在磁盘中