Chrome内存缓存与磁盘缓存

Question

我对chrome内存缓存与磁盘缓存感兴趣？我使用webpack,common chunks插件并使用chunkhash生成我的所有文件.

内存与磁盘缓存有何不同.当我重新加载我的页面时,一些文件从内存缓存加载,一些文件从磁盘缓存加载(bundle.js和image.jpg来自内存缓存,css来自磁盘缓存).有时它会有所不同.我们可以控制它,从哪里选择加载的东西吗？内存缓存似乎比磁盘缓存更快.

Answer 1

就像他们的名字所说:

"内存缓存"存储和加载来自内存(RAM)的资源.所以这要快得多,但它是非持久性的.在关闭浏览器之前,内容可用.

"磁盘缓存"是持久的.缓存资源存储在磁盘上或从磁盘加载.

简单测试:打开Chrome开发者工具/网络.多次重新加载页面.表格列"大小"将告诉您某些文件是"从内存缓存"加载的.现在关闭浏览器,再次打开Developper Tools/Network并再次加载该页面.所有缓存的文件现在都从"磁盘缓存"加载,因为您的内存缓存为空.

Answer 2

Chrome在多个抽象级别实现缓存.核心是HTTP(浏览器)缓存 - 其他缓存机制的后端.通常缓存可分为:

HTTP缓存

通过网络发出的每个请求都由遵守RFC的 HTTP Cache代理.第一次请求时,缓存被覆盖.资源由原始URL键入.

服务工作者缓存

为了优雅地处理网络连接故障,您可以使用Service Workers.缓存和缓存存储将再次从磁盘中获取.

闪烁缓存

Blink在两种创建模式中使用Http Cache作为后端 - 在内存和简单(文件系统)中.使用哪一个取决于全局限制设置缓存他们可以采取多少内存.此外,当前渲染器缓存获得的份额最多.缓存的是字体,图像和脚本.如果全局内存使用量达到某个指定的阈值,则使用文件系统后端.

强制在内存缓存中

如果您希望从内存覆盖默认机制来提供文件,则可以实现自己的Service Worker.使用File Api,可以读取资源并将其存储到内存中的对象中.然后,覆盖fetch事件将禁止使用此全局对象提供的内容进行网络和文件读取.