萧墙HTML5手机发展之路(51)——jquerymobile在提高页面访问速度
正在使用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>
版权声明:本文博客原创文章,博客,未经同意,不得转载。