您现在的位置是:网站首页> 编程资料编程资料
Html5应用程序缓存(Cache manifest)HTML5离线缓存Manifest是什么详解HTML5中的manifest缓存使用HTML5 manifest离线缓存的示例代码
2021-08-31
903人已围观
简介 这篇文章主要介绍了Html5应用程序缓存(Cache manifest)的相关资料,可以优化加载速度,节约服务器资源。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一、作用
离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件。优化加载速度,节约服务器资源。
二、适用场景
正如 manifest 英译的名字:离线应用程序缓存,这项功能是设计给会有离线场景的应用来使用,例如:需要离线使用的手机APP/H5,亦或是PC端的纯静态页面。
三、问题
1.服务器资源更新后显示滞后需要多刷新一次页面
- 首次在载入页面时,浏览器会判断是否引入了 manifest,若检测到引入,则下载并按文件规则缓存资源。
- 再次载入页面时,便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。
- 当 manifest 文件更新时,页面加载已经进行,但是缓存更新尚未完成,便会先使用旧 manifest 所缓存的文件,同时浏览器会将新的 manifest 文件里的缓存文件下载下来,若想看到最新的静态资源需要刷新下页面重新加载一次。
2.全量加载
当 manifest 文件更新时,所有的资源都要全部被下载一次,并且其中一个出现异常会导致整个 manifest 运行异常。
3.W3C标准及浏览器支持
作为 H5 的新属性,初衷是用来构造离线应用的,缓存网站资源的话原本浏览器的缓存机制(304)已经很好了,没必要再使用 manifest 做缓存;实际上因为使用反响并不好,W3C正在废弃 manifest。
四、使用方法
首先在标签 中指定 manifest 配置文件。
配置文件 manifest.appcache。
CACHE MANIFEST # 井号备注,这边可以放版本更新时间,修改备注算更新 manifest 文件 CACHE: # 首次下载 CACHE 后列出来的文件后缓存到本地。 /favicon.ico /main.css NETWORK: # NETWORK 下的文件不可被缓存,必须要与服务器连接。 login.php FALLBACK: # 一行放两个路径,第一个是访问资源,第二个是替补;当无法访问前一个资源时,用后一个资源代替之。 /cat/ /404.html
注意
manifest 会把当前页面缓存下来,所以若想更新当前页,只能先更新 manifest 文件。
五、总结
manifest 适用于需要离线运行的应用(定时器,计算器,阅读器等工具);而需要经常发布频繁更新的网站,这种离线缓存机制并不适合。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- Html5之title吸顶功能Html5导航栏吸顶方案原理与对比实现css实现5种滚动吸顶实现方式的比较(性能升级版)纯CSS解决H5布局中的吸顶吸底的实现步骤
- 浅谈Html5移动端ios/Android兼容性总结详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
- 深入浅析HTML5中的article和section的区别详解HTML5中div和section以及article的区别HTML5中div、article、section的区别及使用介绍HTML5中的Article和Section元素认识及使用
- HTML5触摸事件实现移动端简易进度条的实现方法html svg生成环形进度条的实现方法HTML5超炫酷粒子效果的进度条的实现示例HTML5实现自带进度条和滑块滑杆效果网页加载进度条详解(推荐)HTML页面缩小后显示滚动条的示例代码
- HTML5声音录制/播放功能的实现代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5离线应用与客户端存储的实现利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用HTML5中的网络存储实现方式使用HTML5 IndexDB存储图像和文件的示例HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码
- 浅谈Html5多线程开发之WebWorkersHTML5新特性 多线程(Worker SharedWorker)HTML5 Web Workers之网站也能多线程的实现
- html5的input的required使用中遇到的问题及解决方法HTML5表单验证特性(知识点小结)html5自带表单验证体验优化及提示气泡修改功能HTML5 表单验证失败的提示语问题使用HTML5和CSS3表单验证功能HTML5实现表单自动验证功能实例代码HTML5利用约束验证API来检查表单的输入数据的代码实例html5中valid、invalid、required的定义wordpress添加Html5的表单验证required方法小结
- HTML5 input新增type属性color颜色拾取器的实例代码HTML5中input[type='date']自定义样式与日历校验功能的实现代码html5中去掉input type date默认样式的方法
- html5中audio支持音频格式的解决方法HTML5实现音频和视频嵌入的方法详解移动端HTML5音频与视频问题及解决方案HTML5中视频音频的使用详解HTML5制作酷炫音频播放器插件图文教程HTML5自定义mp3播放器源码
