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

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版，在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求，用户会感到略有停顿。使用多页模版，可以改善页面跳转之间的流畅性，但是多个页面要一次性下载，所以下载时间变长，用户体验也会受到影响。

在基于预取技术的开发中，当第一个页面的DOM对象加载完成后，jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。预取的详细过程如下：

注意：使用预取功能时，不建议给所有链接都添加data-prefetch属性，因为过多的data-prefetch属性导致移动设备需要预取的页面数量过多，加载的DOM对象过大，导致手机内存消耗，部分手机运行缓慢甚至崩溃。

为了有效节省移动设备浏览器的内存资源，对于没有标记缓存的页面，在访问下一个页面的时候将被清理掉。

如果不想清理掉之前页面在浏览器中的缓存，可以在相应的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>

转载于:https://www.cnblogs.com/lanzhi/p/6469004.html

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

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
h5builder php,小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.php.cn/ 一.新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App ...
小强的HTML5移动开发之路（6）——Canvas图形绘制基础
在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制. 一.Canvas标 ...
小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...
小强的HTML5移动开发之路（10）——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: <!DOCTYPE html PUBLI ...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...
小强的HTML5移动开发之路（27）—— JavaScript回顾2
Javascript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 function Person(name, age){ //习惯上第一个字母大写//this修饰的变量称为属性thi ...

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

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

最新文章

热门文章