在使用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中改善页面访问速度的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  9. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

  1. 在C#中实现Word页眉页脚的全部功能

    页眉页脚经常使用于文章排版,在Word工具栏里.我们能够加入页眉,页脚,页码,日期和时间.图片等信息和内容.页眉/页脚有两个额外选项:首页不同,奇偶页不同.有时在不同的节(section)里插入不同的 ...

  2. php操作zip压缩文件

    php操作zip压缩文件 一.总结 1.php操作zip:php可以操作zip压缩文件,通过 ZZIPLIB扩展库,这些扩展库可以通过composer安装,或者某些版本的php会自带 2.完美操作zi ...

  3. controller接收参数的对象是vo还是dto?

    我也没有深入了解过,就我使用情况来说的话,VO和DTO在实际开发过程中其实可以是一样的.从定义上来说他们区别于使用的所在层,VO(view object)视图对象,DTO(Data Transfer  ...

  4. 洛谷——P1179 数字统计

    https://www.luogu.org/problem/show?pid=1179 题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 ...

  5. Android 一个异步SocketHelper

    发送流程:首先定义一个缓冲池,发送数据时仅仅是将待发送的数据加入到缓冲池中,再由后台的工作线程从缓冲池中取得待发送数据进行发送.可能某些情况下在数据发送完成时需要做一些处理(比如写日志),便定义了一个 ...

  6. win7管理工具不可用

    看看这个路径的文件夹是否还在C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools如果有缺失的文件夹就自己新 ...

  7. 右键菜单添加带图标的Notepad++

    给Notepad++ 加带图标右键菜单 方式一: 拷贝以下代码建立一个reg文件,替换相关路径,保存,双击运行加入注册表 Windows Registry Editor Version 5.00 [H ...

  8. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  9. Mybatis的使用中的一些不太注意的技巧

    以下就总结一下Mybatis的使用中的一些不太注意的技巧,算是Mybatis的总结笔 1.插入时主键返回 我们向数据库插入一条记录是,使用Mybatis的<insert>是无法返回插入的主 ...

  10. MVC中url路由规则

    Routing:首先获取视图页面传过来的请求,并接受url路径中的controller和action以及参数数据,根据规则将识别出来的数据传递给某controller中的某个action方法 MapR ...