正在使用jQuery Mobile开发时间可以选择单页模板和多页模板，在单页模板时从一个页面跳转到另一个页面时从需要server要求。用户会感到轻微的停顿。
使用多页模板，为了改善网页之间跳跃的流畅，但多个页面一次性下载，下面的加载时间增加。响。
在基于预取技术的开发中，当第一个页面的DOM对象载入完毕后，jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。
预取的具体步骤例如以下：
注意：使用预取功能时，不建议给全部链接都加入data-prefetch属性，由于过多的data-prefetch属性导致移动设备须要预取的页面数量过多，载入的DOM对象过大。导致手机内存消耗，部分手机执行缓慢甚至崩溃。
为了有效节省移动设备浏览器的内存资源，对于没有标记缓存的页面，在訪问下一个页面的时候将被清理掉。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
假设不想清理掉之前页面在浏览器中的缓存，能够在对应的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>
版权声明：本文博客原创文章，博客，未经同意，不得转载。