H5缓存机制学习记录
2016-05-05 21:18
316 查看
参考文章:http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=404724239&idx=1&sn=e0a2887f9ff6293f0f550fa4e44057a0&scene=1&srcid=0331jLkF55dKeJO00POMiXLZ
1.浏览器缓存机制
2.Dom Storage(local storage 和 session storage)
3.Web SQL Database,不推荐使用。
根据官方的标准文档,Web SQL Database存储机制不再推荐使用,将来也不再维护,而是推荐使用AppCache和IndexedDB。
4.Application Cache(manifest)
AppCache的缓存文件,与浏览器的缓存文件分开存储的,还是一份?应该是分开的。因为AppCache在本地也有5MB(分HOST)的空间限制。
AppCache在首次加载生成后,也有更新机制。被缓存的文件如果要更新,需要更新manifest文件。因为浏览器在下次加载时,除了会默认使用缓存外,还会在后台检查manifest文件有没有修改(byte by byte)。发现有修改,就会重新获取manifest文件,对Section:CACHE MANIFEST下文件列表检查更新。manifest文件与缓存文件的检查更新也遵守浏览器缓存机制。
如用用户手动清了AppCache缓存,下次加载时,浏览器会重新生成缓存,也可算是一种缓存的更新。另外, Web App也可用代码实现缓存更新。
分析:AppCache看起来是一种比较好的缓存方法,除了缓存静态资源文件外,也适合构建Web离线App。在实际使用中有些需要注意的地方,有一些可以说是”坑“。
要更新缓存的文件,需要更新包含它的manifest文件,那怕只加一个空格。常用的方法,是修改manifest文件注释中的版本号。如:# 2012-02-21 v1.0.0
被缓存的文件,浏览器是先使用,再通过检查manifest文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
在更新缓存过程中,如果有一个文件更新失败,则整个更新会失败。
manifest和引用它的HTML要在相同HOST。
manifest文件中的文件列表,如果是相对路径,则是相对manifest文件的相对路径。
manifest也有可能更新出错,导致缓存文件更新失败。
没有缓存的资源在已经缓存的HTML中不能加载,即使有网络。例如:http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
manifest文件本身不能被缓存,且manifest文件的更新使用的是浏览器缓存机制。所以manifest文件的Cache-Control缓存时间不能设置太长。
另外,根据官方文档,AppCache已经不推荐使用了,标准也不会再支持。现在主流的浏览器都是还支持AppCache的,以后就不太确定了。
在Android内嵌Webview中,需要通过Webview设置接口启用AppCache,同时还要设置缓存文件的存储路径,另外还可以设置缓存的空间大小。
5.Indexed Database
6.File System API
1.浏览器缓存机制
2.Dom Storage(local storage 和 session storage)
3.Web SQL Database,不推荐使用。
根据官方的标准文档,Web SQL Database存储机制不再推荐使用,将来也不再维护,而是推荐使用AppCache和IndexedDB。
4.Application Cache(manifest)
AppCache的缓存文件,与浏览器的缓存文件分开存储的,还是一份?应该是分开的。因为AppCache在本地也有5MB(分HOST)的空间限制。
AppCache在首次加载生成后,也有更新机制。被缓存的文件如果要更新,需要更新manifest文件。因为浏览器在下次加载时,除了会默认使用缓存外,还会在后台检查manifest文件有没有修改(byte by byte)。发现有修改,就会重新获取manifest文件,对Section:CACHE MANIFEST下文件列表检查更新。manifest文件与缓存文件的检查更新也遵守浏览器缓存机制。
如用用户手动清了AppCache缓存,下次加载时,浏览器会重新生成缓存,也可算是一种缓存的更新。另外, Web App也可用代码实现缓存更新。
分析:AppCache看起来是一种比较好的缓存方法,除了缓存静态资源文件外,也适合构建Web离线App。在实际使用中有些需要注意的地方,有一些可以说是”坑“。
要更新缓存的文件,需要更新包含它的manifest文件,那怕只加一个空格。常用的方法,是修改manifest文件注释中的版本号。如:# 2012-02-21 v1.0.0
被缓存的文件,浏览器是先使用,再通过检查manifest文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
在更新缓存过程中,如果有一个文件更新失败,则整个更新会失败。
manifest和引用它的HTML要在相同HOST。
manifest文件中的文件列表,如果是相对路径,则是相对manifest文件的相对路径。
manifest也有可能更新出错,导致缓存文件更新失败。
没有缓存的资源在已经缓存的HTML中不能加载,即使有网络。例如:http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
manifest文件本身不能被缓存,且manifest文件的更新使用的是浏览器缓存机制。所以manifest文件的Cache-Control缓存时间不能设置太长。
另外,根据官方文档,AppCache已经不推荐使用了,标准也不会再支持。现在主流的浏览器都是还支持AppCache的,以后就不太确定了。
在Android内嵌Webview中,需要通过Webview设置接口启用AppCache,同时还要设置缓存文件的存储路径,另外还可以设置缓存的空间大小。
5.Indexed Database
6.File System API
相关文章推荐
- HTML5-postMessage实现跨域
- 自定义H5页面规范
- 给大家推荐几篇技术文章
- 浅谈锚链接(native 嵌套 h5)
- HTML5 audio标签使用 preload属性 规定是否在页面加载后载入音频
- PHP & HTML5 学习 第四课 PHP变量
- 便利的html5 之 required、number 、pattern
- HTML5 Canvas游戏开发(四)lufylegend开源库件(下)
- 移动前端头部标签(HTML5 head meta)(转)
- html5中audio标签在不同平台下的问题
- Html5 手机网页中,长按会触发系统事件,请问怎么取消这些事件?
- HTML5拖放事件
- 加速Web开发的9款知名HTML5框架
- html5调用手机摄像头,实现拍照上传功能
- HTML5调用手机摄像头拍照
- PHP Html5上传大文件
- HTML5——拖放
- HTML5——音频视频
- HTML5培训第11节课堂笔记(响应式布局:媒体查询,条件注释,mui基础知识,引导页小实例)
- HTML5气泡悬浮框(已经加上完整文件)