山西建设厅网站2016年3号,网站网页设计基本理论,淮南百姓网,荆门网站建设 金键盘html5离线缓存1. 简介1.1 什么是离线缓存1.2 优点1.3 针对对象2. 实现方式2.1 使用3. window.applicationCache对象相关api3.1 属性3.2 事件3.3 方法1. 简介
1.1 什么是离线缓存 HTML5中引入了应用程序缓存#xff0c;意味着Web应用可以进行数据缓存#xff0c;并可以在没有…
html5离线缓存1. 简介1.1 什么是离线缓存1.2 优点1.3 针对对象2. 实现方式2.1 使用3. window.applicationCache对象相关api3.1 属性3.2 事件3.3 方法1. 简介
1.1 什么是离线缓存 HTML5中引入了应用程序缓存意味着Web应用可以进行数据缓存并可以在没有因特网连接的情况下进行访问。带来较好的用户体验。1.2 优点
1. 离线浏览
2. 提升页面载入速度
3. 减轻服务器负载1.3 针对对象
1. html中的缓存机制浏览器自带缓存
2. 针对目标图片、JS文件、CSS缓存、静态页面2. 实现方式
2.1 使用 ① 服务器端需要维护一个manifest清单(哪些内容缓存、哪些内容不缓存、缓存失败如何处理)(CACHE MANIFEST-CACHE:、NETWORK:、FALLBACK:)② 浏览器页面中需要简单设置当前页面使用哪个缓存清单文件在服务器中配置缓存清单文件 后缀(通常是 .manifest .appcache .cache)
CACHE MANIFEST
# 声明是缓存清单文件 version 1.0.0.2.9# 要缓存的js/css文件
CACHE:
js/jquery-3.4.1.js
js/main.js# 要使用网络才能访问的内容 不需要缓存
NETWORK:
shop.jsp# 缓存失败怎么处理
FALLBACK:
css/style.css / css/styleError.css在服务器配置文件中配置映射清单文件类型 以tomcat为例在WEB-INF/web.xml中mime-mappingextensionmanifest/extensionmime-typetext/cache-manifest/mime-type/mime-mapping在html页面头部声明清单文件 html manifestindex.manifest3. window.applicationCache对象相关api
3.1 属性
applicationCache.status 状态
stylestatusUNCACHED0未缓存IDLE1空闲CHECKING2检查中DOWNLOADING3下载中UPDATEREADY4更新准备就绪OBSOLETE5过期
3.2 事件
项目Valuechecking当检查更新或第一次下载manifest清单时往往是第一个被触发的事件简单版理解当检查缓存时会触发noupdate检查到manifest清单文件不需要更新时触发简单版理解检查如果不需要更新缓存那么后续事件全部不会执行downloading更新或第一次下载manifest清单时触发progress下载清单文件过程中周期性触发 loaded/totalupdateready更新下载清单文件完成并就绪后触发cached清单文件下载完毕并成功缓存后触发obsolete当访问清单文件返回404或401时触发error 在以下情况发生时触发a 已触发obsolete事件b 清单文件没有改变但清单是文件下载失败c 获取清单文件时发生错误d 正在更新本地缓存时清单文件再次被更改// jQuery监听事件appCache.onprogress function(e){// do sth...};appCache.addEventListener(checking,function(e){});$(appCache).on(checking,function(e){});3.3 方法 applicationCache.update(); 请求更新缓存applicationCache.swapCache(); 更新本地缓存数据
