プリフェッチとキャッシュ

ページのプリフェッチ

通常、サイトを複数の単一ページテンプレートでつくることは、大きなひとつの複数ページテンプレートでつくるよりも好ましいスタイルです。それによって、各ページのDOMを小さく保つことができます。

単一ページテプレートを使った場合、ユーザが他のページを高速に訪問できるようDOM上に他のページをプリフェッチすることができます。ページをプリフェッチするには、該当ページへのリンクに data-prefetch 属性を指定します。jQuery Mobileは、現在のページが読み込まれ pagecreate イベントが実行された後で、バックグラウンドで対象ページを読み込みます。たとえば、次のように指定します。

 ... 

プリフェッチ指定はいくつでも可能です。プリフェッチさせたい全てのリンクに data-prefetch を指定してください。

他にも、プログラムから $.mobile.loadPage() を使ってプリフェッチを行う方法もあります。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

プリフェッチの利点は、そのページへ遷移しようとした際にAjaxのローディングメッセージをユーザが目にしなくて済むということにもあります。ローディングメッセージは、リンクが押された際に未だプリフェッチが終わっていなかった場合にのみ表示されます。

ページのプリフェッチは、当然ながらユーザの帯域を使って追加のHTTPリクエストを発生させます。そのため、この機能はユーザがかなりの確率でそのページへ遷移すると期待される場合にのみ使用するのが良いでしょう。典型的なパターンとしては、例えばフォトギャラリーで「次」や「前」の画像をプリフェッチしておけば、高速にページが切り替えられるというような具合です。

DOMサイズの管理

ページ切り替えアニメーションでは、切り替え前後両方のページがDOM上に載ることになります。そのまま古いページをDOMに残しておけば、そのページへの最アクセスが高速になります。また、携帯端末などでは動作が重くなったりブラウザがクラッシュする原因になったりもします。

そのためjQuery Mobileでは、DOMを綺麗にしておく仕組みが組み込まれています。ページがAjaxにより読み込まれると、jQuery Mobileは削除されるべきというフラグを立てます。そして、そのページからユーザが遷移する(技術的に言うと pagehide イベントで)と、DOM上から削除するようになっています。このページに再度アクセスされた場合、おそらくはブラウザがネイティブに持つキャッシュからHTMLを取り出してくれるでしょう。そうでなければ、再度サーバにリクエストが投げられます。(ただし階層化されたリストビューページを遷移している場合は、リストビューページから完全に離脱するまで削除されません)

複数ページテンプレートを用いた場合は、この限りではありません。jQuery Mobileがページを削除するのは、Ajaxによって読み込んだページだけです。

DOM上へのキャッシュ

もし望むならば、過去に訪問したページをDOM上から削除せずに残しておくよう設定することも出来ます。これによってページがキャッシュされることになり、ユーザがページを再訪した際に高速アクセスできるようになります。

過去に訪れた全てのページをDOM上に残しておくならば、ページプラグインの domCache オプションを true に設定してください。

$.mobile.page.prototype.options.domCache = true;

そうではなく特定のページだけをキャッシュしたい場合は、ページコンテナに data-dom-cache=“true” を指定します。

        
特定ページのキャッシュは、次のようにプログラムから行うことも出来ます。
        
pageContainerElement.page({ domCache: true });

        
DOMキャッシュは、DOMを非常に大きくしてしまう場合があります。それは端末を極端に重くするなど、メモリ圧迫による問題を起こしかねません。DOMキャッシュを有効にする場合、DOMの大きさを保つよう慎重に管理しつつ、幅広い端末でテストするようにしましょう。
        

      
      

        

          

            ページ機構
          
          

            単一ページテンプレート
          
          

            複数ページテンプレート
          
          

            ページタイトル
          
          

            ページ間リンク
          
          

            ページ切替効果
          
          

            ダイアログ
          
          
プリフェッチとキャッシュ
          

            Ajaxとハッシュ、履歴
          
          

            動的なページ作成
          
          

            スクリプティング
          
          

            PhoneGap
          
          

            touchOverflow
          
          

            ページのテーマ
          
        
        

          

            
          
          

            

              [PR] jQuery Mobileリファレンスが書籍になりました
            
            

            
森 直彦 (著)
            
2012年1月20日 発売
            
新品 ￥2,709