前の記事 ≪:サイトで使える500近いフリーのPNGアイコンセット「spirit20」
次の記事 ≫:Mac Mini の画像をPhotoshopで1から作成するチュートリアル

JavaScriptコーディング等を書く上でのパフォーマンス確認事項30

2010年06月17日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法

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

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

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, jQuery, パフォーマンス, 高速化, CSS, コーディング
スポンサード リンク

By.KJ : 2010年06月17日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)