非同期通信により、高速でシームレスなページ遷移を実現

6431 views
約2分

本テーマでは、pjax (pushState + ajax)という技術を用い、非同期通信によってサイト内のページ遷移の処理を効率化し、ページ表示速度を通常のページ遷移に比べて圧倒的に高速化を実現しました。

通常、リンクをクリックしてサイト内の別のページに遷移する場合、遷移先のページのソース(HTML,Javascript,CSS等)を再び最初から読み込み、解析し、表示します。

しかし、最初にあるページを読み込んだ後は、CSSやJavascript、その他ヘッダーやフッター内のほとんどのコードはサイト内で共通のものであるため、サイト内で別ページを表示する際に、それらの共通するコードをまたはじめから読み込む処理は、本来不要な重複する処理を繰り返すためにレンダリングや通信負荷をかけてしまう原因となります。

この無駄を可能な限り排除するため、本テーマには、ページを表示する際に実際に更新が必要なメインコンテンツのソースと、一部のコードやメタタグのみをリフレッシュし、共通で利用できるヘッダーやフッターのソースは更新せずにページ遷移をする機能が搭載されています。

非同期通信ページ遷移デモ&速度比較

なお、この特定のページだけ非同期通信によるページ遷移を無効にしたいリンクがある場合は、対象のアンカータグに付与した任意のclass(セレクタ)をテーマオプションに登録しておくことで、 特定のリンクのみ pjaxによる非同期通信によるページ遷移を除外することも可能です。

もちろん、テーマオプションにて サイト全体でこのpjaxによるページ遷移機能を無効化することもできます。

Comments

コメントはまだありません。

FacebookでシェアTwitterでシェアPinterestでシェア