正在使用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. Cocos2d-iPhone V3 (1) 其基本程序常用的行动框架和介绍

    Cocos2d-iPhone V3 (1) 其基本程序常用的行动框架和介绍 博客:http://blog.csdn.net/prevention 笔者:犀利哥 - 第一部分:一个 Cocos2d-iP ...

  2. Android 中字体的处理

    //得到TextView控件对象 TextView textView = (TextView)findViewById(R.id.custom); //将字体文件保存在assets/fonts/文件夹 ...

  3. URL压缩算法的短地址

    时下,短网址应用已经在全国各大微博上開始流行了起来.比如QQ微博的url.cn,新郎的t.cn等. 我们在新浪微博上公布网址的时候.微博会自己主动判别网址.并将其转换,比如:http://t.cn/h ...

  4. Visual Studio 2015使用EF6的ModelFirst模式添加实体数据模型缺少tt文件问题

    在看实体框架 (EF) 入门的时候,当按照样例做到ModelFirst的时候出问题了 这是使用vs2015新建的实体数据模型 这是官网样例 对比样例截图,会发现里面缺少.tt的文件.最重要的是最终代码 ...

  5. C# 闭包问题

    C# 闭包问题-你被”坑“过吗? 引言 闭包是什么?以前看面试题的时候才发现这个名词. 闭包在实际项目中会有什么问题?现在就让我们一起来看下这个不太熟悉的名词. 如果在实际工作中用到了匿名函数和lam ...

  6. angularJS socket

    工程Controller加载文件Service层socket.js.controller所在页面时连接socket(也可一进入项目就连接,看需求).细节还需继续优化,写下来以防忘了~ Service层 ...

  7. 折返(Reentrancy)VS线程安全(Thread safety)

    在Wiki上,折返例如,下面的定义(接) In computing, a computer program or subroutine is called reentrant if it can be ...

  8. iOS第三方库

    热门iOS第三方库:看完,还敢自称”精通iOS开发”吗? 综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? h ...

  9. 大话设计模式C++实现-文章7章-代理模式

    一个.UML画画 二.概念 代理模式:为其它对象提供一种代理以控制对这个对象的訪问. 三.应用场景 (1)远程代理.也就是为一个对象在不同的地址空间提供局部代表.这样能够隐藏一个对象存在于不同地址空间 ...

  10. c++读取文本文件

    #include<iostream> #include<fstream> using namespace std; int main() { int a,b=-100000,c ...