スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryの高速化をまとめてみる

jQuery高速化ふと思い立って、jQueryの高速化について調べました。
高速化したい!というより遅い書き方してないかなーというノリです。
なのであまり凝らずに、ササッと出来るもの主体でまとめてみます。

今回はこのサイトがとても役にたちました。
書いたテストコードを実行できて、さらに他の人と結果を共有できちゃいます!
便利です。皆さんも是非使って下さい。
実行環境
 Google Chrome var 22.0.1229.79 m(2012.10.01の最新版)
 jQuery 1.8.2

セレクタの高速化

腐るほど言い尽くされていますので、今更ですが。

idセレクタが最も高速
idセレクタはidのみ指定して使う idから検索を始めて、対象を絞り込むだけでもかなり早くなります。

余計なセレクタを挟まない
classセレクタについては、諸説あって混乱しましたが、単純な性能はclass>tagのようです。

複雑なセレクタは分割する

親子セレクタ(a>b)はchildrenを使う
親子セレクタはjQuery自体で推奨されない記述ですので、children、findを利用しましょう。

子孫セレクタ(a b)はfindを使う
$("#id").find("tag")と$("tag","#id")は同じです(結局findを呼びます)。
厳密にはfindが高速ですが、誤差程度です。可読性や好みで使い分けましょう。

参考 : jQueryのパフォーマンスを下げるアンチパターンに関する超意訳

複数セレクタ(a,b)は分割する 複数セレクタはなるべく避けましょう。別々で選択した方が早い場合もあります。

addメソッドで選択要素を追加していく方法も複数セレクタと同程度ですので
個別でセレクタを使ったほうがいいかもしれません。

状況によりますので、絶対ではありませんが。

同じセレクタは使わない

キャッシュする
チェーンメソッドを利用する 参考 : jQuery高速化 

チェーンメソッドとキャッシュは同程度の性能です。
チェーンメソッドは可読性を下げると言われますので、上記のように対象の単位でインデントするなど工夫をするといいですね。

特殊なセレクタを排除する

:xxxは専用のメソッドに置換する 参考
 jQuery .first() vs :first selector
 jquery eq() as selector vs chained method vs css nthchild

とにかく複雑なセレクタは避けましょう。

firstに関しては余裕があればnativeにアクセスした方が早いですが、
よっぽどのこだわりがなければ普通にfirstを利用していいと思います。
firstは[0]が高速

まとめ

・セレクタはidから検索できるようにする
・複雑なセレクタはメソッドに分割する
・必ずキャッシュを利用する

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメントの投稿

非公開コメント

その中でYanik彼は十分に彼のビジネスを行って取得していないのに疲れて得た方法について話しました。彼は彼に大きな後押しを与え、すべてを変え、彼は彼のビジネスに取り組んで道に一つのシンプルなものを追加しました。
bottega veneta トートバッグ http://www.helpnowvt.org/japan/bags371.html

先頭、中間、または各モジュールの最後にプロモーションテキストを挿入するか、フォローアップ。しかし、これをやり過ぎてはいけない。

それプロモーションを実行するときに、インターネットのホームビジネスを構築したときに期限を使用するためのポイントを確認します。あなたはプロジェクトの期限を置くときあなた自身が実際に物事がタイムリーに終ら表示されます。

osrbmzcap@gmail.com

じゃばばっとまとめ jQueryの高速化をまとめてみる
www.ac-versaille.fr http://www.ac-versaille.fr/
Recent Entry
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。