30 best practices to boost your web application performance - Web User Interface Architect

JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。
自分へのインプット＆メモがてらにちょっとまとめてみます。

JavaScript

• DOMの操作は可能な限りやめる
• eval, new Function() は遅いので可能な限り使わない
• withステートメントを使わない（使った事ないですが）
• for-in 文ではなく for 文を使う。
• ループの中で try-catch ではなく、try-catchの中にループを置く
• グローバル変数をなるべく使わない
• aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い
• 複数の文字列連結には、Array で文字列を定義しておいてjoinを使うとよいらしい
• Math.min(val1, val2) のような関数を使わずに、val1 < val2 ? val1 : val2; のように三項演算を使うとよい
  また、 array.push('new'); は array[array.length] = 'new'; より遅い
• setTimeout("kansu()", 1000) は　setTimeout(kansu, 1000) より遅い
• for(var i=0; i < someArray.length; i++) {...} はfor (var i=0, loopLen=someArray.length; i<loopLen; i++) {...} より遅い
• jQuery("ul > li") のように使う。 jQuery("ul li") は広義すぎる
• jQueryの element.css({display:none}); の方が element.hide() より速い
• DOM操作が終わったらリファレンスの変数を解放する
• Ajax の GET は POST より速く動作する
• アニメーションの過度な利用は控える
• JSフレームワークの利用を制限する

サーバサイド

• 静的なコンテンツはHTTPヘッダでキャッシュさせよう（サーバサイドスクリプトの話）
• CSS, JS ファイルはgzipしよう。ただし、（CPU使用率とのバランスは重要です）
• JavaScript は　minify して転送量を下げる

CSS、HTML

• CSSは@import より<link> を使う
• CSSスプライトを使う
• CSSを最初におこう
• HTMLでのDOMの構造をシンプルにコーディングしよう
• background-repeatは避けるno-repeatにする
• テーブルを使わない。使う場合は table-layout:fixed で効率的なレンダリングが行われる

知っていることもおおかったかもしれませんが、しらないこともありました。
勿論実際に検証してみることも必要だと思いますが、参考までに。

関連エントリ

• JavaScriptコーディングに関するテクニックやパフォーマンス等のリファレンス集
• JavaScriptのベンチマークテスト機能を簡単に組み込める「JSLitmus」