HTML5教你解锁网上冲浪新姿势

HTML5出来之前，网络就像风筝线被剪断似的，没网线就没法上网。电脑上倒是勉强可以应付，但手机这样的移动设备，要是WiFi信号不给力，上网就像爬行，连网页都可能卡着打不开。比如《ECMAScript合集》这种需要加载的页面，那感觉真是糟透了！

应用程序缓存的引入

HTML5这个应用程序缓存功能虽然看着挺复杂，但其实是好处多多！上网不用担心断网问题，网页还是照样能看，用户体验瞬间提升有木有？不仅如此，还有助于缓解服务器压力。因为浏览器只会下载那些更新的或者外观上发生改变的东西，所以页面打开速度就变快咯～

两大离线存储技术

HTML5里面有两个搞笑的存东西神器，就是那个叫localStorage跟ApplicationCache的。虽然名字有点怪怪的，但不管你想存什么，它们都能搞定！LocalStorage这个猛男，就适合拿来存些不太重要的Ajax数据，非常方便；要是你想保存文件这种大型货色？别急，交给ApplicationCache就对了，保证看网页时有个好心情~

CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

谁是本地存储，谁又是应用缓存？

 Application Cache Error event: Manifest fetch failed (404)

LocalStorage和ApplicationCache都是缓存好帮手，但是别指望它们就能包揽所有！比如LocalStorage就有点抠门儿，塞不了多少东西，还得问问服务器你是不是真有那么大权限。而ApplicationCache，更适合那些稳如磐石的静态文件。

ApplicationCache配置与使用

用应用程序缓存的时候得注意几点小细节。比如，清单里的MIME类型得设成”text/cache-manifest”才能保证离线能用哟；还有就是，在这份文件里要明确哪些文件该缓存、哪些得联网加载，不能马虎呢；最后，也别忘了设定页面出错时怎么回到原来的页面呀。

APPLICATIONCACHE
    01.js
    02.js
    1.jpg
    2.jpg
    3.jpg
    4.jpg
    demo.appcache
    index.html
    style1.css
    style2.css
    web.config
    zepto.js

更新机制与问题解决

记住，用AppCache时得掌握好更新套路哈。比如你刚改完manifest文件，网页看似加载好了，但其实浏览器还在悄悄地用老资源。再说，如果你开了好几个频道都用AppCache，只要其中一个频道突然流量暴增，所有其他频道的缓存就统统作废！

文件映射与版本管理

AppCache这玩意儿可不能随便对待，不只是要注意网页缓存那么简单！记住，还要关注下manifest文件里的文件映射和版本控制！否则，网页更新了但manifest没动，其他页面可能还是旧版本。所以，一定要看清每个页面的manifest是否是最新的

可用性与易用性考量

AppCache挺好用的，能提高网页应用的抗揍性和用户体验！但是在网上运行应用就有点困难了。所以，用AppCache的时候，选好合适的存储方法很关键，还要注意管理和更新静态资源哟。

网络信号弱导致网页慢？别担心，这只是Web发展历程中的小插曲。HTML5推出了一个实用的功能——应用程序缓存，给网页浏览带来新思路。它不仅让你用得更顺手，还能帮助服务器减负！

Document was loaded from Application Cache with manifest http://localhost/applicationcache/demo.appcache
index.html:1 Application Cache Checking event
index.html:6 GET http://localhost/applicationcache/style2.css net::ERR_FAILED
index.html:1 Application Cache NoUpdate event
index.html:11 GET http://localhost/applicationcache/2.jpg net::ERR_FAILED
index.html:12 GET http://localhost/applicationcache/3.jpg net::ERR_FAILED