jQueryの高速化に関するまとめ

SPONSORED LINK

Pocket

jquery1

なんだか各所から突っ込まれそうですが、自分的にタイムリーなので「10 Ways to Instantly Increase Your jQuery Performance」を紹介してみます。

jQuery高速化のために気をつけるべきことですね。個人的に知らないものもあったのでざざざっと。

  • 常に最新版を使おう
  • jQueryはバージョンアップし続けているので常に最新版を使うことを心がけましょう。ローカル開発だとあれですが、Googleのライブラリを使うのも良いですね。

    » GoogleでホストされているjQueryを使う方法

  • jsファイルはまとめよう!
  • jsはなるべく一つのファイルにして、さらに圧縮をかけるとロード時間が減りますよね。圧縮ツールとしては以下が紹介されていました。

    » /packer/

  • eachよりfor
  • 繰り返しの処理をするときはeachよりforを使いましょう。JavaScriptネイティブの命令の方が速い、ということですね。

  • ClassよりもID
  • これは有名、かな。IDを使った方が速いですよね。IDだらけになるのが悩みですが。

  • セレクタに対象範囲を
  • これ、知らなかったのですが(というか、昨日初めて青い人に教わった)、セレクタの引数に対象範囲が入れられるのですね・・・。これでぐっと高速化がされますね。

  • キャッシュ!
  • なんども使う要素はvarで変数にいれたり、チェーンを使ってずらずらと書くほうが良いですよね。

  • DOM操作はなるべく避ける
  • prepend()、append()、after()などは遅くなるからなるべく避けましょう、かわりにhtml()を使った方が良い場合もありますよ。

  • concat()よりjoin()
  • 文字列を連結するときはconcat()するより、配列に全部いれておいてjoin()した方が速いとのこと・・・へー。

  • return falseすること
  • return falseしていないと、画面の上に戻っちゃうことがありますよね。長~いページなんかでそうしたくない場合はreturn falseを忘れずに。

なお、その他のjQuery高速化に関しるTipsは以下がすごく参考になりますね。

» jQuery を高速に使う CSS セレクタの書き方 – てっく煮ブログ

さてさて、そろそろコード書きますかね。あ、原文は以下からどうぞ。

» 10 Ways to Instantly Increase Your jQuery Performance – Nettuts+

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. June 25th, 2009
    Trackback from : あにずむ
  2. December 5th, 2009