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

雨点打透心脏的1/2处 2024-04-17 20:19 66阅读 0赞

## 引言 ##

?命中强制缓存时，资源会显示 `from memory cache` or `from disk cache`  
![\[外链图片转存失败(img-wT6iPrMH-1567231043642)(evernotecid://79474A00-BD8E-4188-8D23-B0C0D70967FE/appyinxiangcom/1540789/ENResource/p2761)\]][img-wT6iPrMH-1567231043642_evernotecid_79474A00-BD8E-4188-8D23-B0C0D70967FE_appyinxiangcom_1540789_ENResource_p2761]

### 两者的区别 ###

#### 内存缓存(from memory cache) ####

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

#### 硬盘缓存(from disk cache) ####

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

#### **匹配优先级：** ####

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

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

#### 总结对比表格： ####

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

#### 一些疑问点 ####

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

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

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

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

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

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

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

#### 参考 ####

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

[img-wT6iPrMH-1567231043642_evernotecid_79474A00-BD8E-4188-8D23-B0C0D70967FE_appyinxiangcom_1540789_ENResource_p2761]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/72cce58403184e2f8a4a0db9519f5e58.png
[Link 1]: https://www.jianshu.com/p/54cc04190252
[Link 2]: http://xbhong.top/2018/04/16/fromCacheType/
[Link 3]: https://juejin.im/entry/5ad86c16f265da505a77dca4