码迷,mamicode.com
首页 > 移动开发 > 详细

萧墙HTML5手机发展之路(51)——jquerymobile在提高页面访问速度

时间:2015-08-15 19:50:43      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求。用户会感到轻微的停顿。

使用多页模板,为了改善网页之间跳跃的流畅,但多个页面一次性下载,下面的加载时间增加。响。

在基于预取技术的开发中,当第一个页面的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>




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

萧墙HTML5手机发展之路(51)——jquerymobile在提高页面访问速度

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4732959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!