正在使用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>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

萧墙HTML5手机发展之路（51）——jquerymobile在提高页面访问速度的更多相关文章

  1. 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递

    基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...

  2. 小强HTML5手机发展之路（52）——jquerymobile触摸互动

    当使用移动设备的触摸操作,最常用的是点击.按住屏幕或手势,jQuery Mobile能够通过触摸事件绑定行为来响应用户的特定触摸. 一个.点击并按住 直接在代码(在代码中的一切,它使产品!) < ...

  3. 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

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

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

  5. IS创新之路 -- 都昌公司赋能型HIT企业发展之路

    ◆◆前言 近日,上海瑞金医院对我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展之路.已建成五大系统,284个子系统.但我院仍然坚持在努力推进以电子病历为核心医院信息化 ...

  6. 从Instagram“宁静、规则”的成功 看国内APP发展之路

    看国内APP发展之路" title="从Instagram"宁静.规则"的成功 看国内APP发展之路"> Instagram在全球获得的巨大成功 ...

  7. Atitit 信用卡与会员卡（包括银行卡）的发展之路

    Atitit 信用卡与会员卡(包括银行卡)的发展之路 实现跨机构卡片内金额的流动解决方案 1.1. 财务卡片本质上都是会员卡1 1.2. 卡片的发展阶段1 2. 实现跨机构卡片内金额的流动解决方案(加 ...

  8. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  9. HTML5手机APP开发入(4)

    HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...

随机推荐

  1. android:ViewPager动画摘要

    动画节目: 我们可以用ViewPager的setPageTransformer办法,至ViewPager动画.示及效果: 1.CubeInTransformer 2.CubeOutTransforme ...

  2. 改写String类别

    主要4默认功能重写: 代码: #include <iostream> using namespace std; class Cstring{ private : char * data; ...

  3. Java 信号 Semaphore 简介

    Semaphore当前在多线程环境下被扩放使用.操作系统的信号量是个非常重要的概念,在进程控制方面都有应用. Java 并发库 的Semaphore 能够非常轻松完毕信号量控制,Semaphore能够 ...

  4. Android与server通信中的方法（TCP）高效的安全完整

    我以前一直使用sockets实现emulator和PC进行通讯,卡了几天,最后请教其它人最终能够连接了.  错误原因是在IP和port,IP要用本机IP(在CMD输入ipconfig.注意:每次开机本 ...

  5. Chromium-Dev一些缩写

    备案权 tl;dr: && TL;DR;  :"Too long;Don't read" PSA  :"Publice Service Announcem ...

  6. 记一次tomcat故障排查（转）

    1~1024之间的端口号是保留端口,通常是为特定目的预留的.虽然你的问题不是由于保留端口引起的,但是仍然建议你不要随意使用保留端口作为自定义服务的端口,如果你能早早遵循这一规则压根就不会遇到这个问题. ...

  7. JAVA —— 文件输入输出

    import java.io.*; public class FileIO { public static void main(String[] args) { //1.相对路径 File testF ...

  8. NSIS：判断程序是否运行并进行卸载

    原文NSIS:判断程序是否运行并进行卸载 今天在评论里看到网友说要一个这样的功能,就简单写了一个,本来想做360杀手来着,但遗憾的是我从来不用360的东西,所在电脑上也没有360相关的软件进行测试,所 ...

  9. 位运算总结&拾遗

    JavaScript 位运算总结&拾遗 最近补充了一些位运算的知识,深感位运算的博大精深,此文作为这个系列的总结篇,在此回顾下所学的位运算知识和应用,同时也补充下前文中没有提到的一些位运算知识 ...

  10. javaScript在私有的属性和方法

    javaScript并没有什么特别的语法来代表私人.保.或公共的属性和方法,在这一点上与 java或其他语言是不同的.JavaScript大家是共同的所有对象: var myobj={ mypop:1 ...