2.2 预加载与页面缓存

通常情况下，移动终端设备的系统配置要低于PC终端，因此，在开发移动应用程序时，更要注意页面在移动终端浏览器中加载时的速度。如果速度过慢，用户的体验将会大打折扣。为了加快页面移动终端访问的速度，在jQuery Mobile中，使用预加载与页面缓存都是十分有效的方法。当一个被链接的页面设置好预加载后，jQuery Mobile将在加载完成当前页面后自动在后台进行预加载设置的目标页面；另外，使用页面缓存的方法，可以将访问过的“page”容器都缓存到当前的页面文档中，下次再访问时，将可以直接从缓存中读取，而无需再重新加载页面。

2.2.1 预加载

在开发移动应用程序时，对需要链接的页面进行预加载是十分有必要的。因为当一个链接的页面设置成预加载方式时，在当前页面加载完成之后，目标页面也被自动加载到当前文档中，用户单击就可以马上打开，大大加快了页面访问的速度。

实例2-5 jQuery Mobile页面预加载

1.功能说明

在新建的HTML页面中添加一个<a>元素，将该元素的“href”属性值设置为“about.htm”，并将“data-prefetch”属性值设置为“true”，表示预加载<a>元素的链接页面。

2.实现代码

新建一个HTML页面2-5.htm，加入代码如代码清单2-5所示。

代码清单2-5 jQuery Mobile页面预加载

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile页面预加载</title>
    <meta name="viewport" content="width=device-width,
          initial-scale=1"/>
    <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 data-role="page">
    <div data-role="header"><h1>预加载页</h1></div>
    <div data-role="content">
      <p>
        <a href="about.htm" data-prefetch="true">点击进入</a>
      </p>
    </div>
    <div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3.页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图2-5所示。

图2-5 使用预加载方式注入链接页面

4.源码分析

从图2-5可以很清楚地看到，<a>元素链接的目标页面“about.htm”中，“page”容器的内容已经通过预加载的方式注入当前文档中。

在jQuery Mobile中，想要实现页面的预加载，方法有两种，如下所示：

□在需要链接页面的元素中添加“data-prefetch”属性，设置属性值为“true”或不设置属性值均可；设置完该属性值后，jQuery Mobile将在加载完成当前页面以后，自动加载该链接元素所指的目标页面，即“href”属性的值。

□调用JavaScript代码中的全局性方法$.mobile.loadPage()来预加载指定的目标HTML页面，其最终的效果与设置元素的“data-prefetch”属性一样，详细的实现过程将在2.3.3节进行介绍。

说明 无论是添加元素的“data-prefetch”属性，还是使用全局性方法$.mobile.loadPage()在实现页面的预加载功能时，都允许同时加载多个页面。但在进行预加载的过程中需要加大页面HTTP的访问请求，这可能会延缓页面访问的速度，因此，该功能需要有选择性地使用。

2.2.2 页面缓存

在jQuery Mobile中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中；当用户重新访问时，不需要重新加载，只要从缓存中读取就可以。

实例2-6 jQuery Mobile页面缓存

1.功能说明

新建一个HTML页面，在内容区域中显示“这是一个被缓存的页面”文字。将“page”容器的“data-dom-cache”属性设置为“true”，可以将该页面的内容注入文档的缓存中。

2.实现代码

新建一个HTML页面2-6.htm，加入代码如代码清单2-6所示。

代码清单2-6 jQuery Mobile页面缓存

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile页面缓存</title>
    <meta name="viewport" content="width=device-width,
          initial-scale=1"/>
    <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>
    <script type="text/javascript">
        $(function(){
            $.mobile.page.prototype.options.domCache = true;
        })
    </script>
</head>
<body>
  <div data-role="page" data-dom-cache="true">
    <div data-role="header"><h1>缓存页面</h1></div>
    <div data-role="content">
         <p>这是一个被缓存的页面</p>
    </div>
    <div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3.页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图2-6所示。

图2-6 将页面的内容注入文档缓存中

4.源码分析

本实例通过添加“page”容器的“data-dom-cache”属性，将对应容器中的全部内容写入缓存中。一般说来，如果需要将页面的内容写入文档缓存中，有以下两种方式：

□在需要被缓存的元素属性中添加一个“data-dom-cache”属性，设置该属性值为“true”或不设置属性值均可。该属性的功能是将对应的元素内容写入缓存中。

□通过JavaScript代码设置一个全局性的jQuery Mobile属性值为“ture”，即添加代码“$.mobile.page.prototype.options.domCache = true”，可以将当前文档写入缓存中。

说明 使用页面缓存的功能将会使DOM内容变大，可能导致某些浏览器打开的速度变得缓慢。因此，一旦选择了开启使用缓存功能，就要管理好缓存的内容，并做到及时清理。

上一章目录下一章