离线缓存是HTML5提供的新功能.利用HTML5提供的离线缓存功能可以将站点的一些常用的文件缓存到本地，在没有网络的情况下依旧可以访问缓存的页面。 可以被缓存的文件类型有很多，包括但不限于html,css,js,静态图片资源等。
事实上，离线缓存不仅仅在没有网络的情况下会被使用，当有网络的情况下，本地缓存过的文件依旧会被优先使用。有网络的情况下，浏览器会返回200,
离线缓存有很多好处。
第一 离线浏览：不联网就可以访问，之前访问的页面与数据，节约用户流量。
第二 可以有效提高用户体验，可以提高页面加载速度，已缓存的资源加载的更快。
第三 可以减少服务器负载，浏览器将只从服务器下载更新过或者更改过的资源。
要想在页面上使用离线缓存，只需要在页面的html 加入一个manifest属性，使用方法如下。
只需要在文档中标签中包含manifest属性，manifest建议的文件拓展名为“.appcache”
manifest文件：
CACHE MANIFEST：在次标签下列出的文件将在首次下载后进行缓存。（缓存）
NETWORK：在此标题下列出的文件需要与服务器链接，并且不会缓存。（不缓存）
FALLBACK：在此标题下列出的文件规定当也页面无法访问时的回退页面（比如404）
<!DOCTYPE html>
<html manifest='index.appcache'>
<body>
<h1>html5 wellcome</h1>
</body>
</html>
一个典型的manifest文件结构index.appcache文件
CACHE MANIFEST//必须写在前面的固定开头
CACHE: index.html index.js //需要缓存的文件
NETWORK: style.css //不需要缓存的文件
FALLBACK: 404.html //页面无法访问时，跳转页面
//这里注释，使用#号 #VERSION 1.3
1792
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
