IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> atitit.提升性能AppCache -> 正文阅读

[Html-Css]atitit.提升性能AppCache

atitit.提升性能AppCache atitit.提升性能AppCache
1.1. 起源1
2. 离线存储2
3. AppCache2
3.1. Appcache事件点如图2
3.2. Manifest文件4
3.3. 自动化工具4
3.3.1. CACHE:(必须)5
3.4. 页面都离线了,ajax 更新5
3.5. 页面的参数如何携带使用js解析6
3.6. 离线页面的更新  长尾问题6
3.7. 如何更新缓存7
3.8. 注意事项8
1.1. 起源
html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的,比如对于 《ecmascript合集》这样的为阅读而生的页面。
html5便引入了cache manifest 文件。那么什么是cache manifest呢,接下来会讲到。
2. 离线存储
工作中实际使用的离线缓存有localstorage与Application cache,这两个皆是好东西,一个常用于ajax请求缓存,一个常用于静态资源缓存,这里简单说下我的一些理解
离线存储技术
HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景;传统还有离线存储技术为Cookie。
经过实践我们认为localstorage应该存储一些非关键性ajax数据,做锦上添花的事情;
Application Cache用于存储静态资源,仍然是干锦上添花的事情;
作者::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:1466519819@qq.com
转载请注明来源: http://www.cnblogs.com/attilax/
3. AppCache
注意: 主页一定会被缓存起来的,因为AppCache主要是用来做离线应用的,如果主页不缓存就无法离线插件了,因此把index.html添加到NETWORK中是不起效果的。
AppCache文件里面儿
 不必明确列出AppCache链接到的页面,因为在默认情况下,任何包含html元素manifest属性的页面都会缓存,这些自动缓存的页面称为主条目,而清单中列出的文件称为详细条目,如果某些文件需要在线访问,,则可以创建一种文件白名单,如果将它们列于NETWORK;之后,这些文件就总可以通过网络加载,这些文件称为网络条目.
使用Application cache可以提升网站载入速度,主要体现在请求传输上,把一些http请求转为本地读取,有效地降低网络延迟,降低http请求,使用简单,还节约流量何乐而不为
另外要做好对manifest文件的管理,由于清单内文件不可访问或manifest更新不及时造成的一些问题。
html新增了一个manifest属性,可以用来指定当前页面的manifest文件
3.1. Appcache事件点如图

3.2. Manifest文件
接下来详细说说manifest的细节,一个典型的manifest文件代码结构像下面这样:
CACHE MANIFEST#version 1.3CACHE:    test.cssNETWORK:*
manifest文件,基本格式为三段: CACHE, NETWORK,与 FALLBACK,其中NETWORK和FALLBACK为可选项。
而第一行CACHE MANIFEST为固定格式,必须写在前面。
以#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改manifest的作用,可以是版本号,时间戳或者md5码等等。
关于manifest.
首先 manifest 的 contentType = text/cache-manifest
然后,其扩展名,建议为 "appcache"
3.3. 自动化工具
manifest文件中的cache部分不能使用通配符,必须手动指定,这实在太让人不可理解,文件一多,就成了体力活了
3.3.1. CACHE:(必须)
标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径。
a.csshttp://yanhaijing.com/a.css
NETWORK:(可选)
这一部分是要绕过缓存直接读取的文件,可以使用通配符*。
下面的代码 “login.asp” 永远不会被缓存,且离线时是不可用的:
NETWORK:login.asp
FALLBACK:(可选)
指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源,第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。
下面的例子中,如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件。
FALLBACK:/html5/ /404.html
下面的例子中,则用 “404.html” 替代所有文件。
FALLBACK:*.html /404.html
3.4. 页面都离线了,ajax 更新
A. 首先,你可以修改下 manifest 文件来更新这个页面,这个我就不介绍了,但是作为文章内容 页面离线以后,就会存储在本地了,如果你是一篇文章的话,那么这个文章的内容页就被存下来了,你如果以相同的 url 去访问,不管你文章里面的数据更新没有,这个离线下来的页面都不会更新了 ( 除非你更新manifest 文件 ) 。所以,所有的动态数据,你都得用 ajax 方式去获取,就像客户端一样,离线的页面应该是一个没有数据的 空壳,然后通过 ajax 去拉去数据填补这个空壳。然后要注意的是, ajax 的请求地址,要写到 manifest 的 network 中,要不然,你可以试试。
3.5. 页面的参数如何携带使用js解析
比如 m.baidu.com/app?a=1&b=2 ,通常我们用一些参数来标记这个页面,通过参数来渲染页面内容,但是 manifest 对于上面的方式,会认为不同的参数表示不同的页面。如果你吧内容页做成一
3.6. 离线页面的更新  长尾问题
网站更新了,如果更新用户本地的离线页面呢?与很多文章中说的一样,先上线你的文件,然后修改一下页面中引入的cache.manifest文件即可,比如修改下注释,修改后,如果再访问页面,就会先去校验manifest 时候有更新,如有更新,再次刷新页面的时候,页面就会更新了。
A.长尾问题, 就像前面说到的一样,如果你的 manifest 文件更新了,你访问页面,需要刷新一次,更新的页面才能 load 进来,那么这样就有一个问题,如果你的后端数据,就是给 js ajax 接口的数据变化了,你对应的 js 也修改了。那么你修改 manifest 上线的时候,第一次开页面,页面就会 bug 了。再刷一次页面,就好了。那么,这个第一次访问的 bug ,是我们不想看到的。而且你不能知道用户什么时候第二次再来访问你的页面,所以你的页面一旦使用 manifest 离线,就像客户端一样,这样就出现了长尾问题。还好, manifest 有一些 js 接口,可以来判断, load 更新文件。
B.刷新页面
copy 了 api 一段代码:
1. 1 当前文档对应的 applicationCache 对象 
2. window.applicationCache
3. 2 cache.status 属性 , 返回当前离线应用的状态
4.        UNCACHED ( 数值 0) :未启用离线应用
5.        IDLE ( 数值 1) :已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
6.        CHECKING ( 数值 2) :当前更新缓存的状态为 “ 检查中 ”
7.        DOWNLOADING ( 数值 3) :当前更新缓存的状态为 “ 下载资源中 ”
8.        UPDATEREADY ( 数值 4) :当前更新缓存的状态为 “ 更新完毕 ”
9.        OBSOLETE ( 数值 5) :已开启离线应用,但缓存资源都已标记为废弃
3.7. 如何更新缓存
如下三种方式,可以更新缓存:
· 
更新manifest文件
· 
· 
通过javascript操作
· 
· 
清除浏览器缓存
· 
给manifest添加或删除文件,都可更新缓存,如果我们更改了js,而没有新增或删除,前面例子中注释中的版本号,可以很好的用来更新manifest文件。
html5中引入了js操作离线缓存的方法,下面的js可以手动更新本地缓存。
window.applicationCache.update();
如果用户清除了浏览器缓存(手动或用其他一些工具)都会重新下载文件。
3.8. 注意事项
· 
浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
· 
· 
如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存。
· 
· 
引用manifest的html必须与manifest文件同源,在同一个域下。
· 
· 
FALLBACK中的资源必须和manifest文件同源。
· 
· 
当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
· 
· 
站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问。
· 
· 
当manifest文件发生改变时,资源请求本身也会触发更新
   1. 标准鼓励,缓存包含manifest清单的页面,所以实际上,即使我们不显示的把包含manifest的页面,列在manifest缓存清单中,这个页面也会被缓存的.
     2. HTTP相关的缓存头域 以及 https的缓存页面限制,将被manifest所无视. 所以在用户代理 更新页面之前,它是不会过期的. 也就是说,即使是一个HTTPS的东西.也可以脱机工作.
参考
HTML5 AppCache机制分析 - liqinghua1653的专栏 - 博客频道 - CSDN.NET.html
慎用manifest - 推酷.html
HTML5应用程序缓存Application Cache - 叶小钗 - 博客园.html
上一篇文章      下一篇文章      查看所有文章
加:2016-05-15 15:42:47  更:2017-05-16 05:47:21 
 
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2019年4日历
2019-4-22 6:57:28
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库