====索引=====
【Web缓存机制系列】4 – HTML5时代的Web缓存机制
【Web缓存机制系列】5 – Web App时代的缓存机制新思路
【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制
============
随着现代浏览器的推动，Flash放弃对移动端的支持，HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5会迎来一个快速发展和普及的春天。那么，HTML5这个新一代的标准，又给我们带来哪些缓存机制呢？
HTML5 之离线应用Manifest
我们知道，使用传统的技术，就算是对站点的资源都实施了比较好的缓存策略，但是在断网的情况下，是无法访问的，因为入口的HTML页面我们一般运维的考虑，不会对其进行缓存。HTML5的Cache Manifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。
如何实现离线访问特性
实现的步骤非常简单，主要3个步骤：
1）在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件
AddType text/cache-manifest manifest
2）创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本
CACHE MANIFEST
# 直接缓存的文件
CACHE:
Path/to/cache.js
# version：2012-03-20
3）给 <html> 标签加 manifest 属性，并引用manifest文件
具体可以参考：HTML5 缓存: cache manifest
<html manifest=”path/to/name-of.manifest”>
离线应用访问及更新流程
- 第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件
- 再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
- 之后的访问重复第2步的行为
离线机制的缓存用途
从Manifest的机制来看，即使我们不是为了创建离线应用，也同样可以使用这种机制用于缓存文件，可以说是给Web缓存提供多一种可以选择的途径。
存在的问题：缓存文件更新控制不灵活
就目前HTML5提供的manifest机制来讲，一个页面只能引用一个manifest页面，而且一旦发现这个manifest改变了，就会把里面所有定义的缓存文件全部重新拉取一遍，不管实际上有没有更新，控制比较不灵活。针对这个问题，也有的同学提出了一些建议，比如把需要缓存的文件分模块切分到不同manifest中，并分开用HTML引用，再使用强大的iframe嵌入到入口页面，这样就当某一个模式需要有更新，不会导致其他模块的文件也重新拉取一遍。
HTML5 之本地存储localstorage
HTML5给我们提供本地存储localstorage特性，严格来讲，其实已经不算传统Web缓存的范畴。因为它存储的地方是跟Web缓存分开的，是浏览器重新开辟的一个地方。
localstorage的作用
本地存储localstorage的作用主要使Web页面能够通过浏览器提供的set/get接口，存储一些自定义的信息到本地硬盘，并且在单次访问或以后的访问过程中随时获取或修改。
Localstorage的使用
Localstorage提供了几个非常易用的Api，setItem/getItem/removeItem/clear，具体的可以参考：Html5 Step by Step(二) 本地存储
Localstorage的缓存用途
Localstorage设计的本意可能是用来存储一些用户操作的个性化设置的文本类型的信息和数据，当我们其实也可能拿来当Web缓存区使用，比如我们可以将Base64格式编码的图片信息，存在localstorage中，再次访问时，直接本地获取后，使用Css3的Data:image的方式直接展现出来。
存在的问题：大小限制
按照目前标准，目前浏览器只给每个独立的域名提供5m的存储空间，当存储超过5m，浏览器就会弹出警告框。
可以说，HTML5的Manifest和localstorage是给我们在考虑Web缓存的时候提供了多一种思路，当你开发的应用只面对现代浏览器的时候，不妨可以考虑一下。
原创文章转载请注明：
转载自AlloyTeam：http://www.alloyteam.com/2012/03/web-cache-4-html5-web-cache/
相关推荐
摘要：本文作者，腾讯游戏平台与社区产品部安卓开发组高级工程师贺辉超详细分析了各种缓存机制的原理、用法及特点，并针对Android移动端Web性能加载优化的...根据标准，到目前为止，HTML5一共有6种缓存机制，有些是之前
有些web开发经验的同学应该马上会想到，可能是资源发布出了岔子导致没有实际发布成功，更大的可能是老的资源被缓存了。说到web缓存，首先我们要弄清它是什么。Web缓存可以理解为Web资源在Web服务器和客户端（浏览器...
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分内容进行了更新。...
可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和[《高性能 JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作，也可能是搜索引擎聚合...
web app不比PC，有性能和流量方面的考虑，离线应用越来越重要，虽然浏览器有缓存机制，但是时常不靠谱，更何况普通情况下html文件是没法缓存的，断网之后一切over。 什么是manifest? 简单来说manifest能让你的应用在...
虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势： 离线浏览 – 用户可在...
在对传统Demo演示系统的改进方面,我的工作主要包括为提供产品演示系统的移动平台支持,开发了专门的文件缓存机制,解决了用户使用产品演示系统中网络掉线所导致的演示Demo中断,同时也在演示Demo中加入了预加载功能,...
这是一篇知识性的文档，主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于...9. 缓存机制的实现：Web服务器端配置； 10. 缓存机制的实现：服务器端脚本； 11. 参考文档和深入阅读； 12. 关于本文档；
虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势： 离线浏览 – 用户可在离线...
网站采用txt缓存机制；定时生成设置，分页生成控制，减小服务器压力。 3.前台模板完全分离成“完整html文件”，您可以直接运行模板文件看效果，自由定义css标签，直接修改html模板文件，哪怕你每一个不同栏目的页面...
3.3.1跨域缓存机制的主要实现 19 3.3.2.页面回退管理的实现 22 3.4本章小结 22 第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25...
纯DIV CSS布局，兼容FF和IE，OPERA,SAFARI等浏览器，尽量满足搜索引擎，前台模板采用HTML5。 11．支持登录后HTML前台页面快捷修改添加信息，前台管理留言信息。 12．支持简单的会员模块，具有相应的留言评论、下载、...
使用 ...10. 内置数据内存缓存机制，页面快速响应 11. 内置数据 **操作日志** 与用户 **登录日志** 数据库支持列表如下： **MSSQL/Oracle/SQLite/MySql/MariaDB/Postgresql/Firebird/MongoDB**
使用缓存也就是用离屏canvas进行预渲染了，原理很简单，就是先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。可能看到这很多人就会误解，这不是写游戏里面用的很多的双缓冲机制么？ ...
在html5中为我们提供了一种本地缓存机制，它将取代我们的cookie，并且它是不会随浏览器发会我们的服务器端的html5中缓存主要有localStorage，和sessionStorage,具体请祥看本
5 No-Transform缓存控制指令 15 10 Connection 16 11 Content-Encoding 17 12 Content-Language 18 13 Content-Length 18 14 Content-Location 19 15 Content-MD5 19 16 Content-Range 20 17 Content-Type 21 18 ...
功能简介 后台 权限控制，支持多个管理员，学生管理，学生成绩，教师管理，文章管理，站点管理，网站布局自动化，多导航模式，友情链接，站点工具。... 支持多数据库，读写分离，高并发，内置缓存机制。