Web前端中的静态资源缓存笔记

根据webkit资源的分类

webkit的资源分类主要分为两大类：主资源和派生资源。

• 主资源：好比HTML页面，或者下载项，对应代码中的类是MainResourceLoader。
• 派生资源：好比HTML页面中内嵌的图片或者脚本连接，对应代码中的类是SubresourceLoader。

---

根据http状态码分类

1. 200 (from memory cache)
2. 200 (from disk cache)
3. 304 (Not Modified)

200 (from memory cache)

不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭之后，数据将不存在。

虽然Webkit支持 memoryCache，可是也只是针对 派生资源，它对应的类为 CachedResource，用于保存原始数据（好比 CSS， JS等），以及解码过的图片数据。

200 (from disk cache)

不访问服务器，直接从磁盘中读取缓存，当kill进程时，数据仍是存在。

它的直接操做对象为CurlCacheManager。

这种方式也只能缓存 派生资源。

它的存储形式为一个index.dat文件，记录存储数据的url，而后再分别存储该url的response信息和content内容。Response信息最大做用就是用于判断服务器上该url的content内容是否被修改。具体详见：
Last-Modified

304 (Not Modified)

访问服务器，发现数据没有

更新，服务器返回此状态码。而后从缓存中读取数据。

至于什么时候使用本地缓存，什么时候会访问服务器304，这就和服务器在请求返回中的Header字段有关了。附上 个人HTTP学习笔记。

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

简单理解，强缓存

三级缓存原理

1. 先去内存看，若是有，直接加载
2. 若是内存没有，择取硬盘获取，若是有直接加载
3. 若是硬盘也没有，那么就进行网络请求
4. 加载到的资源缓存到硬盘和内存

结论

引用网上图片