内存缓存(from memory cache)和硬盘缓存(from disk cache) 的区别

引言

?命中强制缓存时，资源会显示 from memory cache or from disk cache

两者的区别

内存缓存(from memory cache)

内存缓存具有两个特点，分别是快速读取和时效性：
快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
时效性：缓存时效性很短，会随着进程的释放而释放

硬盘缓存(from disk cache)

硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

匹配优先级：

浏览器读取命中强缓存资源的顺序为memory cache -> disk cache

• 先去内存看，如果有，直接加载；
• 如果内存没有，则取硬盘获取，如果有直接加载；
• 如果硬盘也没有，那么就进行网络请求；
• 加载到的资源缓存到硬盘和内存。

总结对比表格：

比较	读取速度	时效性	容量	匹配优先级
内存缓存	快速	进程关闭，内存清空	小	先
硬盘缓存	速度比内存缓存慢，需要重新解析文件，进行I/O操作	时效长	大	后

一些疑问点

Q：那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？

计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。

Q：浏览器会把哪些文件丢进内存中？哪些丢进硬盘中？

• 对于大文件来说，大概率是不存储在内存中的，反之优先
• 当前系统内存使用率高的话，文件优先存储进硬盘

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

Q：为什么一般js和图片文件会放到内存缓存，css 放在硬盘缓存？

• 样式表一般在磁盘中，不会缓存到内存中去，因为CSS样式加载一次即可渲染出网页。
• 但是，脚本却可能随时会执行，如果脚本在磁盘当中，在执行该脚本需要从磁盘中取到内存当中来。这样的IO开销是比较大的，有可能会导致浏览器失去响应。因此，脚本一般在内存中。

参考

1. 深入理解浏览器的缓存机制
2. 内存缓存和硬盘缓存的区别
3. 切底了解浏览器缓存