効率的な JavaScript

元々の翻訳はこちらです。

これまでのウェブページはスクリプトをあまり含んでいなかった. 含んでいたとしても, ウェブページの性能に響くようなものではなかった. しかしウェブページがアプリケーションのようになってくると, スクリプトの性能が大きく響くようになる. ウェブの技術を使って作られるアプリケーションが多くなるほど, スクリプトの性能向上はだんだん重要になってくる.

デスクトップのアプリケーションでは, コンパイラを使ってソースを最終的なバイナリに変換する. コンパイラは時間をかけて, できあがるアプリケーションの性能を可能な限り最適化する. ウェブアプリケーションにそんな洒落た仕組みはない. 複数のブラウザ, プラットホーム, アーキテクチャで動かすから, 前もってコンパイルはできない. ブラウザはスクリプトを取得するたびに解釈とコンパイルをしないといけない. アプリケーションはデスクトップばりにスムーズに動かさないといけないし, 読み込みも速い方がいい. デスクトップの計算機からケータイまで, 広く色々な機器で動いて欲しい.

各種ブラウザは上手くやっている. そして Opera は現行のブラウザの中でも最速に並ぶスクリプトエンジンを積んでいる. とはいえ, どのブラウザにも限界はある. そこがウェブ開発者の頑張るところだ. ウェブアプリケーションをできるだけ速く動かすための, 簡単な工夫がある. ループの書き方を変える, スタイルの変更は三回やらず一回にまとめる, 実際に使うスクリプトだけを追加する, など.

この記事では, そうした簡単な変更をいくつか紹介する. それでウェブアプリケーションの性能を改善できる. 扱う範囲は ECMAScript ... JavaScript のコア言語や DOM, 文書のロード方法とした.

目次

ECMAScript

1. eval や Function のコンストラクタを使うのはやめよう
   1. eval を書き換えよう
   2. 関数を使いたいなら function を使おう
2. with を使うのはやめよう
3. 性能を決める関数で try-catch-finally を使うのはやめよう
4. eval と with は隔離しよう
5. グローバル変数を使うのはやめよう
6. 暗黙のオブジェクト変換に気をつけよう
7. 性能を決める関数で for-in を使うのはやめよう
8. 文字列は累積スタイルで使おう
9. プリミティブの操作は関数呼び出しより速い
10. setTimeout() や setInterval() には文字列でなく関数を渡そう

DOM

1. 再描画と再フロー
   1. 再フローの回数をできるだけ減らそう
   2. 再フローの範囲をできるだけ小さくしよう
2. 文書ツリーの変更
3. 不可視な要素を変更しよう
4. 測りごとの罠
5. 複数回のスタイル変更は一回にまとめよう
6. なめらかさと速度にはトレードオフがある
7. 大量のノードを覗くのはやめよう
8. XPath で速度を稼ごう
9. DOM を辿りながら書き換えるのはやめよう
10. DOM の値はスクリプトの変数にキャッシュしよう

文書のロード

1. ある文書から他の文書への参照を生かしておくのはやめよう
2. 高速な履歴移動を使おう
3. XMLHttpRequest を使おう
4. SCRIPT 要素を動的に作ろう
5. location.replace() で履歴を抑えよう

Pages: 1 2 3 4 print