小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版，在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求，用户会感到略有停顿。使用多页模版，可以改善页面跳转之间的流畅性，但是多个页面要一次性下载，所以下载时间变长，用户体验也会受到影响。
在基于预取技术的开发中，当第一个页面的DOM对象加载完成后，jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。预取的详细过程如下：
注意：使用预取功能时，不建议给所有链接都添加data-prefetch属性，因为过多的data-prefetch属性导致移动设备需要预取的页面数量过多，加载的DOM对象过大，导致手机内存消耗，部分手机运行缓慢甚至崩溃。
为了有效节省移动设备浏览器的内存资源，对于没有标记缓存的页面，在访问下一个页面的时候将被清理掉。
如果不想清理掉之前页面在浏览器中的缓存，可以在相应的DOM对象上添加data-dom-cache="true",其实还有一个更好的方法，通过HTML5的离线应用功能将页面内容缓存在本地。
相关示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js"
type="text/javascript" ></script>
</head>
<body>
<div id="page_PageTransition" data-role="page" data-dom-cache="true">
<header data-role="header">
<h1>预取页面处理</h1>
</header>
<div class="content" data-role="content">
<p>这段演示将呈现采用与不采用预取技术的两种页面切换方式。</p>
<a href="PrefetchPage01.html" data-prefetch>采用预取技术的页面</a><br/>
<a href="PrefetchPage02.html" rel="external">传统的页面跳转实现</a>
</div>
</div>
</body>
</html>
PrefetchPage01.html
<section id="page_PageTransition2" data-role="page">
<header data-role="header">
<h1>页面跳转</h1>
</header>
<div class="content" data-role="content">
<p>跳转到经过预取技术的页面</p>
</div>
</section>
PrefetchPage02.html
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js"
type="text/javascript" ></script>
</head>
<body>
<section id="page_PageTransition3" data-role="page">
<header data-role="header">
<h1>页面跳转</h1>
</header>
<div class="content" data-role="content">
<p>跳转到传统的JQuery Mobile页面</p>
</div>
</section>
</body>
</html>
小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- 3. CONFIGURATION官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3. CONFIGURATION 3.1 Broker Configs 3.2 Pr ...
- Zabbix 监控搭建
Zabbix官网地址:https://www.zabbix.com/download 1.服务端 1.操作前安装好Mysql数据库 配置yum源,安装部署Zabbix rpm -i http://re ...
- CMake编译Makefile
以编译Libtif文件为例: 你可以用CMake编译libtiff,超简单,两个步骤. 参考文章 CharlesSimonyi,libtiff库的问题的答复
- Xcode6:No architectures to compile for(ONLY_ACTIVE_ARCH=YES...)
1.问题描写叙述 Xcode6真机測试旧project,不能执行,报错例如以下: 2.解决方式 问题非常明显,当前的执行模式设置了ONLY_ACTIVE_ARCH为Yes,当时的project的Val ...
- AndroidStudio MAT LeakCanary 内存分析之 LeakCanary
现在我们换一种更清晰方便的方式:LeakCanary https://github.com/square/leakcanary 首先将LeakCanary绑在我们的app上 build.gradle ...
- android 4.4 添加物理按键
kernel下添加 Linux-3.4/drivers/input/keyboard/Makefile linux-3.4/drivers/input/keyboard/sw-keyboard.c s ...
- 通过wmi获取本地硬件信息的一些疑问。
通过wmi获取本地硬件信息的一些疑问. http://bbs.csdn.net/topics/391017789 http://blog.csdn.net/xcntime/article/detail ...
- HibernateCRUD基础框架(2)-HQL语句构造器(HqlQueryBuilder,HqlUpdateBuilder)
上篇讲述了最基本的实体类,本篇接着讲述HQL语句构造器,包括查询和更新等. 优点:通过面向对象的方式构造HQL语句,更快捷,不需要手动拼接HQL. 缺点:封装可能降低性能,只能支持常用的和较为简单的H ...
- 为什么我要选择erlang+go进行server架构(2)
原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 为什么我要选择Erlang呢? 一.erlang特别适合中小团队创业: erl ...
- ios获取系统时间
//获取系统时间 NSDate * date=[NSDate date]; NSDateFormatter *dateformatter=[[NSDateFormatter alloc] init]; ...