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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

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

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

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

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

如果不想清理掉之前页面在浏览器中的缓存，可以在相应的DOM对象上添加data-dom-cache="true",其实还有一个更好的方法，通过HTML5的离线应用功能将页面内容缓存在本地。

相关示例代码如下：

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7. initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"
  13. type="text/javascript" ></script>
  14. </head>
  15. <body>
  16. <div id="page_PageTransition" data-role="page" data-dom-cache="true">
  17. <header data-role="header">
  18. <h1>预取页面处理</h1>
  19. </header>
  20. <div class="content" data-role="content">
  21. <p>这段演示将呈现采用与不采用预取技术的两种页面切换方式。</p>
  22. <a href="PrefetchPage01.html" data-prefetch>采用预取技术的页面</a><br/>
  23. <a href="PrefetchPage02.html" rel="external">传统的页面跳转实现</a>
  24. </div>
  25. </div>
  26. </body>
  27. </html>

PrefetchPage01.html

[html] view plain copy

print?

  1. <section id="page_PageTransition2" data-role="page">
  2. <header data-role="header">
  3. <h1>页面跳转</h1>
  4. </header>
  5. <div class="content" data-role="content">
  6. <p>跳转到经过预取技术的页面</p>
  7. </div>
  8. </section>

PrefetchPage02.html

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7. initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"
  13. type="text/javascript" ></script>
  14. </head>
  15. <body>
  16. <section id="page_PageTransition3" data-role="page">
  17. <header data-role="header">
  18. <h1>页面跳转</h1>
  19. </header>
  20. <div class="content" data-role="content">
  21. <p>跳转到传统的JQuery Mobile页面</p>
  22. </div>
  23. </section>
  24. </body>
  25. </html>
时间： 2024-08-18 12:07:10

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

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

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

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

正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求.用户会感到轻微的停顿. 使用多页模板,为了改善网页之间跳跃的流畅,但多个页面一次性下载,下面的加载时间增加.响. 在基于预取技术的开发中,当第一个页面的DOM对象载入完毕后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作. 预取的具体步骤例如以下: 注意:使用预取功能时,不建议给全部链接都加入data-prefetch属性,由于

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路（50）——jquerymobile页面初始化过程

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(50)--jquerymobile页面初始化过程 了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: [html] view plain copy print? <!DOCTYPE html> <html> <head> <title>练习</title

HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航 一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="