- 2009-06-24 (Wed) 15:18
- jQuery関連
なんだか各所から突っ込まれそうですが、自分的にタイムリーなので「10 Ways to Instantly Increase Your jQuery Performance」を紹介してみます。
jQuery高速化のために気をつけるべきことですね。個人的に知らないものもあったのでざざざっと。
- 常に最新版を使おう
- jsファイルはまとめよう！
- eachよりfor
- ClassよりもID
- セレクタに対象範囲を
- キャッシュ！
- DOM操作はなるべく避ける
- concat()よりjoin()
- return falseすること
jQueryはバージョンアップし続けているので常に最新版を使うことを心がけましょう。ローカル開発だとあれですが、Googleのライブラリを使うのも良いですね。
jsはなるべく一つのファイルにして、さらに圧縮をかけるとロード時間が減りますよね。圧縮ツールとしては以下が紹介されていました。
» /packer/
繰り返しの処理をするときはeachよりforを使いましょう。JavaScriptネイティブの命令の方が速い、ということですね。
これは有名、かな。IDを使った方が速いですよね。IDだらけになるのが悩みですが。
これ、知らなかったのですが（というか、昨日初めて青い人に教わった）、セレクタの引数に対象範囲が入れられるのですね・・・。これでぐっと高速化がされますね。
なんども使う要素はvarで変数にいれたり、チェーンを使ってずらずらと書くほうが良いですよね。
prepend()、append()、after()などは遅くなるからなるべく避けましょう、かわりにhtml()を使った方が良い場合もありますよ。
文字列を連結するときはconcat()するより、配列に全部いれておいてjoin()した方が速いとのこと・・・へー。
return falseしていないと、画面の上に戻っちゃうことがありますよね。長～いページなんかでそうしたくない場合はreturn falseを忘れずに。
なお、その他のjQuery高速化に関しるTipsは以下がすごく参考になりますね。
» jQuery を高速に使う CSS セレクタの書き方 – てっく煮ブログ
さてさて、そろそろコード書きますかね。あ、原文は以下からどうぞ。
» 10 Ways to Instantly Increase Your jQuery Performance – Nettuts+
こちらもあわせてどうぞ
- Newer: ポストイットがとりもつラブストーリー『POST-IT LOVE』
- Older: GTD勉強会＠名古屋へのお誘い
Comments:0
Trackbacks:2
- Trackback URL for this entry
- http://www.ideaxidea.com/archives/2009/06/how_to_speed_up_jquery.html/trackback
- Listed below are links to weblogs that reference
- jQueryの高速化に関するまとめ from IDEA*IDEA ～ 百式管理人のライフハックブログ
- trackback from あにずむ 09-06-25 (Thu) 1:12
-
知っておくとかなりよさそうなjQuery、javascript高速化技法〜
( ゜▽゜)/こんばんわ！IDEA*IDEAにjQuery高速化のTipsが載っていました！普段書くときに気をつけることも多いですがjQueryだけじゃなくて普段javascriptかくときに使えそうなこともいっぱいある…
- trackback from IT資格取得をがんばリーマン 09-12-05 (Sat) 23:50
-
ｊQueryの利用と速度
mixiアプリに機能追加をしていて
せっかくjQueryを使っているので、jQueryらしく
htmlをStringで作って、.html()に設定する方式から
タグをappendを用いて作るようにした。その結果、
実…
