一、浏览器Network的Size栏
在浏览器开发者工具的 Network 的 Size 栏会出现的三种情况：
- from memory cache
- from disk cache
- 资源本身大小（比如：13.6K）
二、三级缓存原理
1、先查找内存，如果内存中存在，从内存中加载；
2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3、如果硬盘中未查找到，那就进行网络请求；
4、加载到的资源缓存到硬盘和内存；
三、HTTP状态码及区别
-
200 form memory cache
不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。 -
200 from disk cache
不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。 -
304 Not Modified
访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。
| 状态 | 类型 | 说明 |
|---|---|---|
| 200 | form memory cache | 不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中 |
| 200 | form disk ceche | 不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等 |
| 200 | 资源大小数值 | 从服务器下载最新资源 |
| 304 | 报文大小 | 请求服务端发现资源没更新，使用本地资源 |
一般样式表会缓存在磁盘中，不会缓存到内存中，因为css样式加载一次即可渲染出页面。但是脚本可能会随时执行，如果把脚本存在磁盘中，在执行时会把该脚本从磁盘中提取到缓存中来，这样的IO开销比较大，有可能会导致浏览器失去响应。
四、http header
-
max-age：web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间)
-
Expires：Expires指定的时间根据服务器配置可能有两种：
1、文件最后访问时间。
2、文件绝对修改时间。
如果 max-age 和 Expires 同时存在，则被 Cache-Control 的 max-age 覆盖。 -
last-modified：WEB 服务器认为对象的最后修改时间，比如文件的最后修改时间，动态页面的最后产生时间
-
ETag：对象（比如URL）的标志值，就一个对象而言，文件被修改，Etag也会修改
-
Cache-Control：简单理解，强缓存
五、几种状态的执行顺序
- 现加载一种资源（例如：图片）：
访问-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
六、最后结论
网友评论