html页面缓存设置
① html5缓存的问题，如何正确设置
html5缓存正确的设置办法：
1、启用缓存
设置方法：
<html manifest="example.appcache">
...
</html>
2、设定缓存访问的范围，配置到MANIFEST中：
CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah
② HTML5应用程序缓存Application Cache详解
什么是Application Cache
HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。
Application Cache带来的三个优势是：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响
离线存储技术
HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景;传统还有离线存储技术为Cookie。
经过实践我们任务localstorage应该存储一些非关键性ajax数据，做锦上添花的事情;
Application Cache用于存储静态资源，缓银仍然是干锦上添花的事情;
而cookie只能保存一小段文本(4096字节);所以不能存储大数据，这是cookie与上述缓存技术的差异之一，而因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。
所以Application Cache的应用场景不一样，所以使用也不一致。
Application Cache简介
Application Cache的使用要做两方面的工作：
① 服务器端需要维护一个manifest清单
② 浏览器上只需要一个简单的设置即可
#p#副标题#e#
以例子做说明：
CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg
复制代码
首先我这里报了一个错：
Application Cache Error event: Manifest fetch failed (404)
这个错误的原因是：manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置，不同的服务器不一样
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
这样一来便可以离线应用了，这个时候就算断网了，那些文件依旧能访问
这里有一点值得注意，比如这里不带/index.html他会将“applicationcache/”缓存，其实这个就是index.html
manifest 文件可薯哪槐分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连数友接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
如图所示，HTML5定义了几个事件点，但是我们一般不会主动使用js去操作什么，大多数情况下，我们完全依赖浏览器的处理即可。
#p#副标题#e#
尺寸限制
Application Cache的尺寸限制统一在5M，我这里做一个测试：
如所示，两个css文件依旧超过了5M这个时候
Document was loaded from Application Cache with manifest
index.html:1 Application Cache Checking event
index.html:6 GET
index.html:1 Application Cache NoUpdate event
index.html:11 GET
index.html:12 GET
如所示，style2已经不能缓存了，这个会造成什么问题呢?
比如我A频道维护了自己的Application Cache，B频道也维护了自己的，这个时候A频道如果使用达到了一个峰值，会导致B频道所有的缓存失效，所以：
建议Application Cache，存储公共资源，不要存储业务资源
一些问题
由更新机制来说，首次更新manifest时，因为页面加载已经开始甚至已经完成，缓存更新尚未完成，浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。
window.applicationCache.addEventListener(updateready, function(){
window.location.reload()
});
由上例可以知道，缓存的不只是显示定义的文件，比如上例中的applicationcache/时便会默认保存index.html为映射的数据，并且包含demo.appcache文件，很多时候会遇到一次文件更新线上老是不更新，这个时候随便在manifest配置文件中做一点修改即可更新。
从可用性与易用性来说，Application Cache是值得使用的，但是最好是做静态资源的缓存，真正要实现离线应用还得花更多的功夫呢!
③ 请教高手，html页面中的图片，如何让浏览器缓存至本地
方法很简单，你把保留网页历史的时间改长而且加大缓存目录的体积就行了，方法就是看浏览器顶部，工具，internet选项，这个界面有历史长度，最多999天，看里面的“设置”，可以改保存网页的路径，以及体积大小。在历史时间内，比如30天，不需要再次缓存页面，但是有个问题，就是你如果在线听歌，看大图片，如果过多，会导致你的IE缓存很庞大，有可能超出你的IE默认的体积，所以你最好转移到非系统分区，而且设置体积很大，1G甚至更大，否则超出后默认删除早期的图片，歌曲，flash等文件。
④ html5 如何更新离线缓存
需要服务器。这里用tomcat服务器来讲解。
首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。
一讲到tomcat配置，熟悉的朋友自然就会想到web.xml这个文件，没错，在文件中加入如下配置就行：
1 <mime-mapping>
2 <extension>manifest</extension>
3 <mime-type>text/cache-manifest</mime-type>
4 </mime-mapping>
然后写一个xxx.manifest文件，xxx是你自己取的一个名字。这个文件的格式是这样的：
CACHE MANIFEST
#version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif
第一行是必须的，它标识这是manifest的配置文件。
#version 1.5
这句是注释，没实际的作用，我在这里只是想让浏览器更新缓存文件。因为当这个manifest文件与原来一样的时候，浏览器是不会去重新加载缓存文件的，所以我们可以通过这个注释，一方面修改版本号，另一方面让浏览器更新缓存。
CACHE:
这行指示出下面的文件是要缓存的。示例中，缓存了当前页面：MyTest.html，以及一些css和js文件 还有图片。
还有几个关键字示例中没提到，就是
NETWORK:
FALLBACK:
NETWORK 指不想缓存的页面；FALLBACK 是指请求的文件 没有找到或该文件的服务器没有响应时的替代方案，比如我们想请求某个嵌套页面，但这个页面的服务器连接不上了，那么我可以转向另外一个指定的页面。
这是第二步，第三步，只要在<html>标签中加上manifest的位置就行了：
<html manifest="NAME.manifest">
到这里，就可以实现简单的离线应用了。
那些缓存的文件放在哪呢？
在chrome上测试，发现它是按自己的机制来分块保存这些文件的，所以我没找不到完整的文件。保存的数据在：
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面，具体怎么存，笔者还不了解。
火狐上的文件也是按它自己的机制来存的，不过笔者本人用sqlite打开后，找到了缓存文件的具体信息：
⑤ iOS的webView如何实现html的离线缓存
方法一：离线获取获取到html代码。html代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的所有img标签url。如果是相对url，就加上host。如果是绝对url，就直接下载。这样这个页面里的所有图片路径都拿到了。
方法一的获取img标签url的正则表达式：
NSString *urlPattern = @"<img[^>]+?src=[\"']?([^>'\"]+)[\"']?";
方法二：通过webview和js 本地程序的交换，获取到html页面所有图片下载地址。
webview和本地程序交互的方法是_detailWebView 。
⑥ 微信公众号html缓存处理
近期在发版验证时遇到一个问题，微信公众号登入后页面显示的是老的，强制刷新后，再退出重新登入，仍然显示的是老的页面；
经过一番查找得到了解决方案：
（1）公众号放的菜单地址后加 ?version=1.0.0 每次更新页面则更新菜单；
但是这样每次发版还得修改公众号的菜单，多一步很不方便；
于是和前端一块尝试寻找到另一中解决方案：
（2）前端在html的header中加入缓存策略
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache" />
这样就彻底解决了缓存问题；
但是注意，往往遇到此问题时，已经缓存了没有加缓存策略的html文件，需要清除掉缓存，加载新的带缓存策略的html文件，将来才会实时更新；但是也不能让用户每个都清理缓存啊；
于是就要配合第一种解决方法，在菜单链接后面加参数，这样用户侧会重新load新版本的html（微信菜单设置发布后，有将近10分钟的延时），这样配合使用就完美解决了我们的问题；
期间多次尝试发现，微信的缓存策略和页面地址的后缀参数相关，使用相同的后缀，在不设置缓存策略下，就能回到对应的版本，很强大，也很鸡肋
⑦ html 页面怎么对缓存进行设置
根据服务器系统环节的不同设置方法不一样
1、在Apache环境下
可以通过在.htaccess文件中添加下面的代码，设置图片的HTTP缓存和有效期（需要开启apache的headers模块支持）：
#.gimhoy.com<FilesMatch".(flv|gif|jpg|jpeg|png|ico|swf)$">HeadersetCache-Control"max-age=3156000"
其中max-age后面这个数字就是设置的缓存有效期（以秒为单位），比如上面的代码设置了网站的图片使用为期一年（3156000秒）的HTTP缓存。
2、在Nginx下
可以通过修改nginx.conf配置文件，来修改缓存设置：
location ~* .(flv|gif|jpg|jpeg|png|ico|swf)$ { expires 1y; access_log off; break; }
注意：同样的方法，可以给js和css文件设置缓存。