正在使用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. ADN中国队参加微软Kinect他赢得了全国比赛三等奖，我们的创意项目与团队Kinect于Naviswork虚拟之旅

    以下是我的英语写了一个简短的总结,直接贴出来. 让我们知道我们在这参加Hackathon That's an exciting Hackathon for me and also China team ...

  2. IT该忍者神龟Jquery小工具easyUI物业摘要召回

    找了个时间看了下EasyUI插件.对它的插件感觉是非常舒服,特地把Easy UI的大部分功能属性做了一下汇总. 此属性列表请对比jQuery EasyUI 1.0.5,关于它的很多其它资讯请猛击这里. ...

  3. 10624 - Super Number

    题目链接 题意:给出n到m的范围,求出一个数在前i位数组成的数字能被i整除.假设存在输出这个数,假设不存在.输出-1. 思路:回溯,每次放第i位,然后推断是否符合题意.这题踩着时间过去的2.6s(看了 ...

  4. XeTeX中文解决方案（temp）

    临时记录一下XeTeX的中文解决方案.一些包的文档只是走马观花得到的解决方法,所以可能有诸多纰漏. 另个人还是比较看好LuaTeX,但是在里边鼓捣中文还是一团糟,等探索一下再回来补充. 我使用的包是x ...

  5. Oracle 11g+oracle客户端（32位）+PL/SQL develepment的安装配置

    之前一直想学Oracle,可是就是安装配置Oracle一直未成功,让人很苦恼,特别是什么监听器什么的,一直没搞明白,弄了整整一天都没弄出来,上网查资料后发现资料上大多数都是参差不齐,不太详细明了,尝试 ...

  6. 他的第一个NDK的Demo

    DEMO下载链接: http://download.csdn.net/detail/logicsboy/7535409 首先给你们恶补下啥是NDK:(我从百度Copy的) NDK全称:Native D ...

  7. CentOS6.5查看一port执行状态

    netstat -nap | grep 22 版权声明:本文博主原创文章,博客,未经同意不得转载.

  8. hdu Jungle Roads(最小生成树)

    Problem Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of for ...

  9. Swiftly语言学习1

    单纯值: 1.let常量声明,var声明变量(同时宣布福值,编译器会自己主动判断出类型) var myVariable = 42 myVariable 50 let myConstant = 42 l ...

  10. [Python 2.7] Hello World CGI HTTP Server

    # CGI HTTP server ## Getting Started Python 2.x is preferred to this simple demo. I'm using Python 2 ...