正在使用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. bnu 34982 Beautiful Garden(暴力)

    题目链接:bnu 34982 Beautiful Garden 题目大意:给定一个长度为n的序列,问说最少移动多少点,使得序列成等差序列,点的位置能够为小数. 解题思路:算是纯暴力吧.枚举等差的起始和 ...

  2. Gradle 载入中 Android 下一个.so档

    1.在project下新建 jni/libs  目录   . jni 是和原来的libs  同级 ,将全部的.so文件放入 新建的libs文件下 2.在build.gradle 文件里新增下面内容到a ...

  3. Spark第一个研究笔记1一片 - Spark一个简短的引论

    该公司推出的在线项目Spark拥有近1随着时间的推移.有效,Spark事实上,优秀的分布式计算平台,以提高生产力. 开始本篇笔记.此前的研究会Spark研究报告共享出来(由于篇幅的限制,它将被划分成制 ...

  4. Windows Phone 8 ControlTiltEffect

    /* Copyright (c) 2010 Microsoft Corporation. All rights reserved. Use of this sample source code is ...

  5. hdu 4965 Fast Matrix Calculation(矩阵高速幂)

    题目链接.hdu 4965 Fast Matrix Calculation 题目大意:给定两个矩阵A,B,分别为N*K和K*N. 矩阵C = A*B 矩阵M=CN∗N 将矩阵M中的全部元素取模6,得到 ...

  6. nRF905 - 系列示意图

    一个.截图 备份文件:sch20110521.7z 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  7. java反思reflect 分析Object物

    直接看它的一个例子 </pre><pre name="code" class="java">package reflect; impor ...

  8. Word2vec 讨论

    我没有在自然语言处理完成.但基于Deep Learning 关注,自然知道一些Word2vec强大. Word2vec 是google 在2013年提供的一款将词表征为实数值向量的高效工具.而Word ...

  9. Object-c中间initialize 与 辛格尔顿

    简单说下initialize任务.在初始化过程中同样的类将被调用一次. 直接在代码解释initialize任务. 创建一个InitTest类 InitTest.m #import "Init ...

  10. 架构设计之设计模式 (一) 适配器(Adapter)---提高复用性

    简介 简介是为了描述一下该模式是干嘛用的,为了让不了解该模式的人看了之后也有一些新的认识. 本文章分为两部分,第一部分主要介绍适配器模式:第二部分介绍该模式与相近模式的异同. 下午一直在讨论设计模式, ...