jQuery Mobile逆引きリファレンス
data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
一般的に、スマホ／タブレットはデスクトップパソコンに比べて非力です。jQuery Mobileは軽量なライブラリですが、それでもウィジェットの初期化／描画には相応のマシンパワーを要求されるため、環境によってはページの表示が遅い、モッサリと感じることもあるかもしれません。そこでjQuery Mobileでは、ウィジェットの初期化を効率よくするために、data-defaults／data-enhancedという属性を提供しています。
ウィジェットの動作パラメーターをデフォルト設定する ― data-defaults属性
まず、data-defaults属性はウィジェットの動作パラメーターを無条件に（マークアップでの指定にかかわらず）全てデフォルト値を設定します。ウィジェットをデフォルト設定で初期化することがあらかじめ分かっているならば、この属性を「true」に設定しておくことで、他のdata-xxxxxx属性の解釈をスキップできるため、ウィジェット初期化の際のパフォーマンスを改善できます。
例えば以下の例であれば、Collapsibleウィジェットでさまざまなパラメーターを設定していますが、data-defaults属性を「true」としていますので、全て無視され、デフォルトの開閉パネルが表示されることが確認できます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true" data-inset="false"
data-theme="b" data-content-theme="b"
data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
data-iconpos="top" data-corners="false" data-mini="true"
data-defaults="true">
<h3>Rails 4アプリプログラミング</h3>
<p>初心者にもわかりやすく、Rails開発を行う上での基礎的な構文、キーワード、Model、View、Controllerについて詳しく解説します。</p>
</div>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
ウィジェットによる文書ツリーの操作を抑制する ― data-enhancedオプション
ウィジェットは、基本的にその初期化に際して、描画のために必要な要素や属性をもともとのマークアップに対して付与することで、リッチなスタイルを実現しています。複雑なマークアップを意識しなくても、data-xxxxx属性やclass属性の付与によって、見栄えのするページを生成してくれるのはjQuery Mobileの長所の1つですが、このような文書ツリーの操作は相応にオーバーヘッドの大きな処理です。
そこで本来であれば、jQuery Mobileが自動生成してくれるマークアップをあえて自分で記述してしまい、jQuery Mobileの負担を減らすこともできます。これがdata-enhanced属性の役割です。data-enhanced属性を「true」（デフォルトは「false」）に設定することで、ウィジェットはその部分をすでに処理済みと認識して、要素／属性の生成を行いません。
例えば以下は、上が「data-enhanced="true"」属性を付与した（自分で処理済みのマークアップを準備した）例、下はマークアップの処理をjQuery Mobileに委ねた例です。いずれの場合も同じ結果を得られることを確認してください。
|
<form>
<!--描画に必要なマークアップをあらかじめ準備-->
<div class="ui-field-contain">
<div class="ui-checkbox">
<label for="entry_news" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">
メールニュースを希望：</label>
<input id="entry_news" name="entry_news"
type="checkbox" value="need" data-enhanced="true" />
</div>
</div>
<!--マークアップの加工はjQuery Mobileに委ねる-->
<div class="ui-field-contain">
<label for="entry_news2">メールニュースを希望：</label>
<input id="entry_news2" name="entry_news" type="checkbox" value="need" />
</div>
</form>
|
data-enhanced属性はパフォーマンスを改善するために有効なアプローチの1つですが、半面、開発者が最終的なマークアップを理解しておく必要があるため、「コードが複雑になる」「そもそも記述が面倒」「jQuery Mobile側の変更に影響を受けやすい」などのデメリットもあります。利用の是非は、開発生産性とパフォーマンスとを鑑みながら判断してください。
なお、data-enhanced属性は多くのウィジェットで利用できますが、jQuery Mobile 1.4.3の時点では、Listview／Selectmenu／Panel／Toolbar／Navbar／Sliderなどで利用できません。
※以下では、本稿の前後を合わせて5回分（第35回～第39回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
37. 【現在、表示中】≫ data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
38. スクロール時に追加的にコンテンツを読み込むには？
スクロールの開始／終了のタイミングで発生するscrollstart／scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
39. モバイル端末を縦横回転させたときにレイアウトを調整するには？
端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。
