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 で効率的なレンダリングが行われる

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

関連記事