完美使用application cache几点心得
web app最大的硬伤是页面渲染与交互性能问题,页面渲染与加载静态文件的快慢有关。如何快速加载它们?我们可以用html5的新特性application cache(非官方简称:appCache)来缓存各种静态文件,达到快速加载静态文件的目的。本文将与你共同讨论关于appCache的用法。
对于appCache的基本用法,请自行google之,本文也推荐两篇appCahce API介绍文章:Application Cache API(一) Application Cache API(二)。
我们知道,在A页面中引用manifest文件,即使该manifest文件没有在列表中缓存A页面,但是A页面也会自动缓存。可以想象,如果该页面是传统的jsp或php解析而来的,那么解析后的html被缓存了,后端数据发生变化,该页面也不会有反应,除非更新manifest。频繁地更新manifest会失去利用此html5新特性的价值,造成加倍的流量损失(appCache缓存文件是重新下载服务器文件,而无视浏览器渲染时已经下载的)。如何解决这个尴尬的问题呢?实践证明,“js渲染页面+localStorage缓存数据+appCache缓存静态文件”可以完美避开appCache的不足,既有效利用了新特性,页面又能及时获取到远程的新数据。下面就这三点技术相互之间的配合使用,详细说明下:
1.js渲染页面。
很常见的技术,你可以在js里拼接字符串,通过appendChild加入到页面中,也可以通过javascript-MVC来做这方面事情。因为数据和模板是分离的,数据通过ajax/jsonp远程获得,你也可以用新技术webSocket。其实建议数据也保存到本地,若远程数据没有发生改变时,就不用重新渲染某个区域,做到局部更新渲染。目前比较常见的mvc框架backbone/angularJS等,实现的都很不错。私心推一下自己的mvc框架——icat-mvc,它完(ji)美(ben)地(shang)实现了上述描述的所有事情。访问页面时,先是通过localStorage数据进行渲染页面,不至于让页面一片空白;发出ajax请求获取远程数据,如果远程数据和本地数据一致则不再重新渲染,不一致则重新渲染该区域。
2.localStorage缓存数据。
辅助js加快渲染页面,不至于js渲染页面空白时间太长。大家会问,如果第一次访问页面,没有缓存怎么办?呵呵,不怎么办。icat-mvc实现就是,如果没有缓存,也会把区域框架(<wrapxxx></wrapxxx>)先渲染到页面中,告诉js我曾经来过。获得远程数据后,重新渲染时就会直接appendChild标签wrapxxx之下。但是后面再去访问此页面,因为数据是默认缓存的,就可以体验页面飞速渲染的好处了(体验区)。各位可以在pc-chrome上狂刷几下该页面,看除了第一次有白屏之外,其余几次都是图片加载下(欺骗性的图片懒加载效果),整个页面框架基本不动。
3.appCache缓存静态文件。
亮点总是在最后出现。但是遗憾地告诉大家,如果想让离线效果更好(各种图片都要显示),单纯地依赖前端技术无法做到。这时就要借助服务端的威力了,让服务端监听“敏感数据”特别是图片的增删改,动态生成manifest文件,从而告诉浏览器,缓存的东西该更新一下了。如果离线要求不那么严格,你可以只缓存用到的静态文件,不需要服务端参与appCahce,也能让页面迅速渲染。
ok,本文就此结束了。
转载于:https://www.cnblogs.com/valleykid/p/3495504.html
完美使用application cache几点心得相关推荐
- 为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
上篇博客(在github上写个人简历--最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- html5 application cache 空间限制,HTML5离线存储之Application Cache
关于html5的离线存储,大致可分为: localStorage, sessionStorage indexedDB web sql application cache 可以在chrome的debug ...
- HTML5 - 应用程序缓存(Application Cache)
为什么要使用Application Cache技术? 在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多.但 ...
- HTML5 应用程序缓存 离线浏览【Application Cache】轻松地创建 web 应用的离线版本。
HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML ...
- html5调用手机中的application,HTML5中的Application Cache概念
HTML5中的Application Cache概念 我们知道缓存技术对于提高我们的应用程序性能有着非常重要的作用,主流的编程语言基本上都有相应的缓存技术比如 Applic览或讲琐了过自系一读页围这就 ...
- MyBatis使用DEMO及cache的使用心得
下面是一个简单的MyBatis使用DEMO. 整体结构 整体代码大致如下: POM依赖 需要引用两个jar包,一个是mybatis,另一个是mysql-connector-java,如果是maven工 ...
- Application Cache manifest 的处理 (Webkit)
<html manifest="xxx"> 缓存构成 url+.manifest+manifest 或者 url (没有manifest) webkit解析ht ...
- HTML5---offline application(application cache)
http://www.cnblogs.com/softlover/archive/2012/09/10/2677326.html http://blogs.msdn.com/b/ie/archive/ ...
最新文章
- 每天生产45亿词,GPT3已渗透300+应用,网友:边吃边拉
- oracle 函数参数类型,ORACLE 11g中的表值函数? (参数化视图)
- 【转载】CSS 入门精要(一)
- Tesseract 3.02 OCR文字识别调查记录
- 【Python】函数默认参数怎么改变?
- Qt Creator向项目添加库
- 数据传值方式、分支结构、循环结构
- word List20
- python安装sklearn_让机器学习自动帮我们建模,这4个Python库能让你大开眼界!
- JavaScript学习记录总结(十)——几个重要的BOM对象
- 【转载】快速掌握一个语言最常用的50%
- android删除重复照片,android 删除重复文件
- js基础-17-解析url的函数,字符串出现的次数最多,并统计它出现几次
- 在线markdown文件转pdf
- 图标文字垂直居中对齐方法
- 自动驾驶-LQR工程实现(调研)
- flink任务常见问题
- 递归树求递归算法时间复杂度
- 【数学建模】数学建模(一)——数学模型概述
- 更好地整理数据:windows下怎么让不同路径下的两个文件夹保持同步内容
热门文章
- Pandas 表连接(Merge,join,concatenate)
- 在sqlplus中实现命令的上翻下翻功能
- C++语言vector容器介绍和示例
- 小牛485通讯原理_让你秒懂智能电表工作原理及抄表原理
- 分组 查出id最大的_MySQL分组top N问题疑点
- 热敏电阻如何查表计算温度_额温枪温补算法:热电堆温度补偿算法 MTP10B7F55
- 领导逼走员工的新套路,一次就见效
- 华为云回应“关闭私有云”传闻 将进行业务调整形成混合云产品部
- Thymeleaf学习总结(1)——新一代Java模板引擎Thymeleaf
- 复制文件夹时同时拷贝其权限