pjax(pushState + Ajax)を使うと、Ajaxを利用しつつブラウザの戻る・進む機能や再読み込みに対応したWebアプリケーションを簡単に構築することができます。 pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ こちらに書かれている点だけを見ても非常に強力で、積極的に使っていきたいプラグインであるといえますが、加えてWebアプリケーションの体感速度が向上するというメリットがあります。

デモ

デモ、というか実際にWebアプリケーションにpjaxを組み込んだのがこちら。

pjaxを組み込んだWebアプリケーション (Perfume Headline)

Chrome・Firefoxからアクセスした場合はpjaxが有効になり、他のブラウザからアクセスした場合よりも体感速度が向上することが確認できると思います。

高速化する理由

若干カブリ気味ですが、少しの変化で大きな影響がある、ということで。

Webアプリケーションの処理削減

本文以外の部分のHTMLを生成する必要がなくなるため、Webアプリケーション部分の処理を削減できます。

転送量の削減

本文のHTMLのみを転送するため、転送量を削減できます。

レンダリングの処理削減

本文のみをレンダリングするため、レンダリングの処理を削減できます。

おわりに

今回組み込んだ例は小規模なWebアプリケーションであるため大きな差は出ませんでしたが、たくさんの外部ファイルを読み込んでいたり、ナビゲーション部分の生成に負荷が掛かるようなWebアプリケーションではより高速化の恩恵を受けられるのではないかと思います。

また、今回は触れませんでしたが、pjaxを利用するとGitHubのようにページ遷移の時にカッコいいアニメーションをつけることもできるので、Webアプリケーションにより高度な表現を追加することもできるようになります。

高速かつ美しいWebを簡単に実現することができるpjax、試してみてはいかがでしょうか。