Charlie's volatile short

JavaScriptの動作を軽くするための工夫 @ 日経BP ITpro 技術者視点のユーザビリティ考

1. JavaScriptファイルの読み込み時間を短縮する
2. 実行のタイミングなどを工夫して体感速度を上げる
3. 遅延実行・ロードであとからこっそりロードする

うちの会社でWebアプリの開発をしているスタッフ陣には読んでおいてほしいと思った記事。

...

1.は古（いにしえ）のマイコンBASICの高速化テクニックにも通じるところがある。8ビットマイコンでは文字列の解析に時間がかかるから変数名を短くしましょう、とか、マルチステートメントにしましょうとか、N88だとこっちが高速でHu-BASICだとこっち、とか。
⇒ BASIC をやろう！うわさのうわさのそのまたうわさ（速さ編） @ 某のページ（予定地）

ITproの記事では、サーバからの転送時間のことをメインにしているが、文字列の解析にかかる時間が短縮される効果も結構あるんじゃないかな。
ちなみに、JavaScriptの転送時間短縮の効果は1Mbpsくらいの転送速度なら如実に表れて、10Mbpsくらいの転送速度ならほとんど体感できないと思われる。
たとえば、ありくいブログエディタのJavaScriptコード全体で172kB。全部を一つのファイルにしてgzipをかけると34kBになった。1Mbpsの場合は、約1.4秒→約0.3秒で1秒も削減するので体感できるが、10Mbpsだと0.14秒から0.03秒への短縮なので、ほとんど体感できない。
だから高速な通信回線を使っている会社で、社内用Webアプリを高速化したいと思ったら、ファイルサイズを小さくする以外の方法を試したほうが効果が大きいと思われる。

2.は「画像の読み込み中にJavaScriptを実行して初期化の待ち時間を減らす」「onloadで全部の初期化をすると大変だから、初めて使われるタイミングで初期化して最初の待ち時間を減らす」、3.は「表示範囲外の画像は、表示されるタイミングで読み込む」ためのテクニックを解説。1.と違って、コードを手でいじる必要があるけれど、画像が多かったりJavaScriptで高度な制御をするアプリほど、効果も大きいはず。
そういえば、うちの会社で作ったAjax Webアプリで、複数の処理結果を非同期に取得するようにしたんだけれども、ブラウザのHTTP同時接続数制限にひっかかって、結局ほとんど上から順に表示されるだけという状況になってしまったことがある。表示範囲の中だけ処理要求を送るようにすれば、少しはユーザビリティが向上するんだろうな～。

関連記事

• JavaScriptファイルの読み込み時間のベンチが紹介されていた
• JavaScriptを使った画像の遅延読み込みが解説されていた

外部リンク

• HTTPの同時接続数はどうあるべきか? @ スラッシュドット ジャパン ... 各ブラウザの標準設定の情報がある。