パフォーマンス改善

ajaxナビゲーションを使用する

iphone4(ios6.1)でjqueryとjquery.mobileの読み込みにかかる時間は850ms程。 jqueryのみでは350ms。ipad2では400ms, 高速なpcでは 100ms。

ページ遷移毎にこの時間をかけないためには ajaxナビゲーションを使用する必要がある。

ajaxナビのメリット

  • ページ切り替えにかかる時間を短縮
  • ページ切り替えにアニメーションを使用できる

ajaxナビのデメリット

  • js,cssの読み込み方法に考慮が必要
  • htmlのidの指定方法に考慮が必要
  • 一部ajaxナビをoffにする必要がある場合がある
    • 例:formのmultipartポストはajaxはできない(標準ではできないが工夫するとできる)
  • Web部品を提供するアプリケーションフレームワークでは部品自体の変更が必要になる場合がある

自動拡張を辞める

“ページを読み込む” → “ページ内の要素拡張”

“ページ内の要素拡張”とは<a data-role=“button”>のただのリンクをボタンに見えるようにhtmlを変更すること。

“要素拡張”にはcpuの力によっては秒単位の時間がかかる場合があるので、ページ全体を走査させずに特定の要素(又はブロック)を指定して拡張する。 例:折り畳まれて見えていない要素を最初に拡張する必要はないため、開いた時点で拡張するなど。

最後の手段(どうしても要件に合わない場合)

hp閲覧者の端末で自動拡張させずに最初から拡張して送信する。 ajaxナビと組み合わせるとページ遷移時のJQMのオーバーヘッドがほとんどないため非常に高速。

  • バージョンアップ時の対応が非常に大変になる
  • 一部のui部品はブラウザごとに拡張で生成されるタグを変えていたりするので対応が必要になる

サーバサイドjsを使って展開する場合は上記は問題にならない。(サーバには大きな負担。要キャッシュ)

参考

ui/ui_set/jquerymobile/peformance.txt · 最終更新: 2013/06/16 08:48 by enibloadmin
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0