浏览器本身的缓存机制
- 浏览器会对静态文件(html csss js 图片等)进行自动缓存
- 下一次访问该网页，会读取缓存
- 读取缓存之前进行判断， 第一判断缓存时间和服务器上文件的最后一次修改时间
- 如果缓存时间大于最后一次修改时间， 证明缓存之后，服务器上没有对文件进行修改，此时，浏览器会直接读取缓存的文件
- 如果缓存时间小于最后一次修改时间，证明缓存后服务器又对文件进行了修改，此时，浏览器会重新下载服务器上的静态文件，并重新进行缓存。
Application Cache缓存和加载机制
在第一次访问时，浏览器加载完HTML文档后，会查看其是否有引入manifest文件。若引入，则加载manifest文件，然后根据manifest的文件内容进行资源的缓存，并缓存当前文档
之后访问，浏览器首先会查看manifest文件是否被修改（无论是内容还是注释），如果被修改，将当做第一次访问，重新根据manifest文件内容进行缓存
如果应用缓存存在，且manifest没有被修改，浏览器直接从缓存中加载文档（注意：加载文档）和资源，不会访问网络（注意：无论联网与否，都不会访问网络）
在缓存多个资源文件时，浏览器下载资源文件会先放在一个临时的缓存中，如果有任何一个资源文件下载失败，浏览器将停止其他缓存资源的下载，并清除临时缓存。如果所有资源文件都被成功下载，浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中
由此可以得出，Application Cache只需保存主文档，其他的css，js等浏览器会自动缓存
如何使用
- 创建一个清单文件，以指定你要保存的资源。
在要使用缓存资源的每个网页中引用该清单文件。
<html manifest='demo.appcache'>
来引入一个manifest文件，这个文件一般为.appcache类型，这个文件的路径可以是相对的，也可以是绝对的，对于manifest文件，要求：文件的mime-type必须是 text/cache-manifest类型。
manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”
如果是nginx服务器
找到nginx服务器跟目录下的mime.types文件，添加
text/cache-manifest appcache;
创建清单文件
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存(必须)
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png
FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png
NETWORK:
# Defines resources that will not be cached.
figure3.pngapplicationCache对象
属性：
- status 返回缓存的状态
方法：
- update() 发起应用缓存下载进程
- abort() 取消正在进行的缓存下载
- swapcache() 切换成本地最新的缓存环境
事件：
- 当清单已缓存时，将触发 cached 事件。
- 当检查是否有更新时，将触发 checking 事件。
- 当下载清单资源时，将触发 downloading 事件。
- 在下载清单资源期间，将触发 progress 事件。
- 当出现问题（如 HTML 404 或 410 响应代码）时，将触发 error 事件。当无法下载清单文件时，也会触发该事件。
- 当缓存有更新的版本可用时，将触发 updateready 事件。
- 请求更新时将会触发 noupdate 事件，但清单不会发生更改。
- 当现有的缓存被标记为已过时时，将会触发 obsolete 事件。
整个缓存过程
注意
清单中的文件引用被解释为清单文件的相对位置，而不是声明它的网页。
对清单来说，没有必要包含声明该清单的网页名称；声明清单的网页会被自动缓存。
根据Application Cache的加载机制，如果仅仅修改资源文件的内容（没有修改资源文件的路径或名称），浏览器将直接从本地离线缓存中获取资源文件。所以在每次修改资源文件的同时，需要修改manifest文件，以触发资源文件的重新加载和缓存。这其中，最有效的方式是修改manifest文件内部的版本注释（所以说那句注释相当重要）
如果资源没有被缓存，在而没有设置NETWORK的情况下，将会无法加载（浏览器不会去网络上进行加载），所以需要使用通配符来表明除了CACHE中确定的资源以外，其他资源都需要去网络上加载
由更新机制来说，首次更新manifest时，因为页面加载已经开始甚至已经完成，缓存更新尚未完成，浏览器仍然会使用过期的资源；浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。
appCache.addEventListener("updateready", function () {
console.log('重新加载。。。。。');
// window.location.reload()
if (appCache.status == window.applicationCache.UPDATEREADY) {
console.log('update')
appCache.swapCache(); // 应用缓存
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
});
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
