扣丁学堂HTML5培训分享HTML5应用程序缓存(Cache manifest)

ITxuexi_66 · · 506 次点击 · 开始浏览    置顶
本篇文章扣丁学堂HTML5培训小编给读者们介绍一下HTML5应用程序缓存(Cache manifest)的相关资料,可以优化加载速度,节约服务器资源。现在分享给家做个参考,希望对小伙伴们有帮助。 一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件。优化加载速度,节约服务器资源。 二、适用场景 正如 manifest 英译的名字:离线应用程序缓存,这项功能是设计给会有离线场景的应用来使用,例如:需要离线使用的手机APP/H5,亦或是PC端的纯静态页面。 三、问题 1、服务器资源更新后显示滞后需要多刷新一次页面 首次在载入页面时,浏览器会判断是否引入了 manifest,若检测到引入,则下载并按文件规则缓存资源。 再次载入页面时,便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。 当 manifest 文件更新时,页面加载已经进行,但是缓存更新尚未完成,便会先使用旧 manifest 所缓存的文件,同时浏览器会将新的 manifest 文件里的缓存文件下载下来,若想看到最新的静态资源需要刷新下页面重新加载一次。 2、全量加载 当 manifest 文件更新时,所有的资源都要全部被下载一次,并且其中一个出现异常会导致整个 manifest 运行异常。 3、W3C标准及浏览器支持 作为 H5 的新属性,初衷是用来构造离线应用的,缓存网站资源的话原本浏览器的缓存机制(304)已经很好了,没必要再使用 manifest 做缓存;实际上因为使用反响并不好,W3C正在废弃 manifest。 四、使用方法 首先在标签 <html> 中指定 manifest 配置文件。 <html manifest="manifest.appcache"> 配置文件 manifest.appcache。 CACHE MANIFEST # 井号备注,这边可以放版本更新时间,修改备注算更新 manifest 文件 CACHE: # 首次下载 CACHE 后列出来的文件后缓存到本地。 /favicon.ico /main.css NETWORK: # NETWORK 下的文件不可被缓存,必须要与服务器连接。 login.php FALLBACK: # 一行放两个路径,第一个是访问资源,第二个是替补;当无法访问前一个资源时,用后一个资源代替之。 /cat/ /404.html 注意: manifest 会把当前页面缓存下来,所以若想更新当前页,只能先更新 manifest 文件。 五、总结 manifest适用于需要离线运行的应用(定时器,计算器,阅读器等工具);而需要经常发布频繁更新的网站,这种离线缓存机制并不适合。 最后想要了解更多关于HTML5方面内容的小伙伴,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频,HTML5培训后的前景无限,行业薪资和未来的发展会越来越好的,扣丁学堂老师精心推出的HTML5在线视频定能让你快速掌握HTML5从入门到精通开发实战技能。

入群交流(该群和以上内容无关):Go中文网 QQ交流群:731990104 或 加微信入微信群:274768166 备注:入群; 公众号:Go语言中文网

506 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传