entry

今すぐに出来る、jQuery を高速化する10個の方法

date: 2009/06/24 16:17 | modified: 2009/06/25 10:34

Nettuts+ では、JavaScript フレームワークの定番となっている「jQuery」のパフォーマンスを、すごく簡単にアップさせる方法が紹介されています。
実はじっくり読み進めているうちに「これ本当に効果あるの?」と思ったり思わなかったりする項目もありましたが……とにかく、ミリ秒単位での高速化を目指しているような方は是非参考にしてみてください。

01. 常に最新のバージョンを使う

jQuery は現在も改良が続けられているプロジェクトです。
Google で提供されているライブラリーを使うという方法もあります。

02. スクリプトを1つにまとめ、圧縮する

ブラウザーの多くは、同時に2つ以上のスクリプトを処理できません。
そのためファイルが増えると読み込みの順番待ちが発生し、結果的にロード時間が長くなってしまいます。
スクリプトが全ページで一々ロードされることを考えて、(自分で書いた)スクリプトは1つのファイルにまとめ、圧縮ツール(例えば、「/packer/」のような)を使ってサイズを減らすことを検討してみてください。
ファイルサイズが小さくなることは、ロード時間の短縮に繋がります。

03. 「each」のかわりに「for」を使う

JavaScript に元々あった関数の方が、jQuery で実装された似た機能を持つものよりも常に速く処理できます。

以下のグラフは、ループ作業で「for」と「each」を比較したものです。
CSS や DOM を扱うような複雑な作業では、もっと差が出てくるはずです。

04. 「class」のかわりに「id」を使う

オブジェクトを選択するときには「id」を使った方がいいでしょう。
これは、jQuery がオブジェクトを読み込むために getElementByID() を使っているからです。

以下のグラフは、要素を選択するときに「id」と「class」で指定した場合を比較したものです。

05. セレクターに「context」を与えてやる

セレクターでどうしても class を指定したいときは、context(直訳すると前後関係)を与えてやりましょう。
例えば、

$('.class').css ('color' '#123456');
$('.class', '#class-container').css ('color', '#123456');

1行目は全体の DOM から class を読み出す必要がありますが、2行目のように context を使って class-container という id に絞ってやることで高速化することが出来ます。

06. 常にキャッシュする

セレクターを何度も使ってはいけません。
出来るならば1行にまとめたり、変数を使ったりしてキャッシュしておきたいところです。
また、特にループ内でセレクターを多用しないでください。かなり遅くなってしまいます。

07. DOM 操作を避ける

prepend()append()after()のように何かを挿入する作業は比較的時間がかかるため、DOM 操作は出来る限り避けたほうがいいでしょう。
出来るのならば、html() などで代用してみてください。

08. 長い文字列を扱う場合は、concat() よりも join() を使う

まず配列を作り、それを埋めてから join する方が、concat よりも速くなります。

09. 「return false;」を忘れない

「return false;」を忘れると、ページの一番上に戻ってしまうことがあります。
これは結構煩わしいので、忘れないようにしたいところです。

10. おまけ。チートシートとリファレンス

チートシートリファレンスを参考にして、開発時間も高速化しましょう。

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています。

関連記事

18 responses

reply

#3669: Ronald

date: 2014/11/19 19:34:33

This wesitbe makes things hella easy.

#1108: yamada damaya

date: 2009/06/24 12:21:41

今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ http://bit.ly/lPEn1

#1107: YoGo

date: 2009/06/24 13:06:01

[B!] 今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ http://gerenuk.crazyphoto.org/2009/06/24/854/

#1106: たーちゃん

date: 2009/08/24 08:38:55

今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ http://gerenuk.crazyphoto.org/2009/06/24/854/ #javascript #jquery #tips

#1105: 文殊堂

date: 2009/08/24 08:43:57

RT @tarchan: 今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ http://gerenuk.crazyphoto.org/2009/06/24/854/ #javascript #jquery #tips

#1104: おたまる。

date: 2009/11/26 20:36:24

みてたなど:今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ http://bit.ly/4ZCtKH

#957: IT資格取得をがんばリーマン

date: 2009/12/05 23:50:35

jQueryの利用と速度

mixiアプリに機能追加をしていて
せっかくjQueryを使っているので、jQueryらしく
htmlをStringで作って、.html()に設定する方式から
タグをappendを用いて作るようにした。

その結果、

実…

#1103: naonao

date: 2010/02/25 08:24:59

RT @gerenukrumoi 今すぐに出来る、jQuery を高速化する10個の方法 http://bit.ly/TAq08

#1366: 東 悟

date: 2011/02/22 12:44:53

RT @gerenukrumoi: 今すぐに出来る、jQuery を高速化する10個の方法 http://bit.ly/g1XbFa

#1368: 4403

date: 2011/02/23 02:58:13

03と07と08知らなかったメモ RT @azuma316 RT @gerenukrumoi: 今すぐに出来る、jQuery を高速化する10個の方法 http://bit.ly/g1XbFa

#1387: snow104

date: 2011/04/25 11:47:58

@litttlepad やっぱJavaScriptネイティブの命令の法が速いってことなのかな。でも、each()の方が楽だし、スピードも体感したことないけどねぇw http://t.co/eN4mIHv

#1388: Mizuta Daisuke

date: 2011/04/28 23:49:20

今すぐに出来る、jQuery を高速化する10個の方法 | gerenuk.crazyphoto.org/: http://me.lt/2n4S2

#1787: NxtGnrB

date: 2011/12/01 15:53:41

“ 今すぐに出来る、jQuery を高速化する10個の方法 :: http://t.co/mVUFpRUd” http://t.co/XhKc1tbw

#1844: basa_wing

date: 2011/12/17 03:36:19

今すぐに出来る、jQuery を高速化する10個の方法 | http://t.co/nPaoYDcW http://t.co/DJlFNzpN

#2688: やしし@きいろが好き

date: 2012/02/10 10:22:20

今すぐに出来る、jQuery を高速化する10個の方法 | http://t.co/nur9c74a http://t.co/994QyT7c

#3385: 制作日誌的な何か

date: 2014/02/17 01:13:05

【茶葉】jQuery高速化と更新情報

どうも、深夜に何やってんだ茶葉です。

もそもそとjQueryの高速化に励んでおりました。
ギャラリーページがjQueryに対応したものの、Google Chromeで表示に最大5秒掛かるうえ、サムネイル(…

#3447: Nike Free Run Norge

date: 2014/09/15 10:11:36

Nike Free Run Norge

今すぐに出来る、jQuery を高速化する10個の方法 | gerenuk.crazyphoto.org/

#939: Twitter Trackbacks for 今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ [crazyphoto.org] on Topsy.com

date: 2009/09/02 10:02:47

[...] 今すぐに出来る、jQuery を高速化する10個の方法 :: gerenuk.crazyphoto.org/ gerenuk.crazyphoto.org/2009/06/24/854 – view page – cached genuine gene group; gerenuk — From the page [...]

respond