あなたのAJAXアプリケーションをクライアント上で最大限に活用する方法

AJAXがホットなのはいうまでもないが、良くあるケースはあなたのWeb 2.0アプリケーションが期待したほど良く機能しないというものである。それに役立つ最適化をいくつか学ぼう。

MIX2007にてIEチームのシニアプログラムマネジャーリードであるCyra Richardson氏が行ったプレゼンテーション、Making Ajax Applications Scream on the Client(source)で、クライアント上においてアプリケーションのパフォーマンスを良くするという問題に対して、デベロッパたちがどのようにアプローチするかと いう課題の詳細が述べられている。

そのプレゼンテーションはあなたのAJAXアプリケーションをどのようにより良く動作させるかという課題を論じている。そのプレゼンはInternet Explorerを使用してパフォーマンスを改善することを論じているのだが、ブラウザが何であれデベロッパたちはこのガイドラインに従うことが可能であるべきである。

これらのテクニックはまたサーバサイドかもしくは組み込みコードを書くのにデベロッパたちが選択する言語からも独立している。だからもし、あなたがASP.NETをC#、VB.NET、JavaかもしくはRubyと一緒に使用していたらそれがあてはまる。

シンボルレゾリューションの最適化

レイトバインディングの世界でどのようにスピードアップするか。スコープチェーンを変数からDOMそれ自体までにおいて、またチェーンの周りで走り続けるのを防ぐのを確実にする方法に関して論じている。

非効率的なJavaScriptコードを防ぐアイディアはInternet Explorer、Firefox、Safari、他のブラウザプラットフォームの境界を越えて全てに適用される。

コード非効率性

ブラウザ内でストリング操作をより効率的にするために

• ローカルの変数を使用すること
• ブラウザオブジェクトからのCacheストリング
• 連結用にArray.joinを使用する

他の考え

• パラメータ化されたコードの代わりに本当に必要でない限りevalを使用しないこと
• SWITCHは大規模なセットには費用がかさむのでtry・catchに包まれたハッシュテーブルを考慮すること
• WITHはどこでもシンボルルックアップによって高額なので手動イテレータを使用すること
• 自分のget・setアクセッサを使用しないこと

ブラウザパフォーマンス考慮

DOMはプラットフォームのジェネリックな性質のためブラウザ内でたいへんなものである。またhover CSSスタイルのようなレイアウト改善にも注目してほしい。

HTTPパフォーマンスはいつもいくつかの簡単な最適化と常識的なアプローチで改善が可能な場所である。

HTTPパフォーマンス

簡易化と削減

• JSファイル上でスクリプトイン
• 一つのCSSファイ不にスタイルイン
• より少なく、小さい未スケールのイメージ
• レイアウトの簡易化
• HTTP圧縮を使用する（多数のキャッシュコントロール上の詳細）

Internet Explorerを狙っているか、もしくはそれを開発ツールとして使用しているデベロッパたちには補助となるツールがいくつかある。

ツールとテクニック

• Internet Explorer用のデベロッパツールバー
• フィドラー：HTTPトラフィックウォッチ
• Ajax View(source)：MS Researchからの新作。オンザフライでJavaScriptを再記述し計測コードを付加する。

FirefoxはJavaScriptを書くのにデベロッパたちに人気で補助的なアドオンもたくさんある。

• Firebug
• Web Developer
• DOM Inspector
  

論じられたテクニックはInternet Exploererのチームから始まったのものだが、ほとんどのコツはクライアント上のブラウザが何であるかに関わらず役に立つはずである。JavaScriptはそれぞれのブラウザプラットフォームにおいて実装は異なっているが最適化は全てに適用される。