勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQueryで高速化

      2014/07/02

高速化について調べる機会があったのでメモ。

------

セレクタはclassよりもidを優先して使う。
 無理な場合は要素セレクタと組み合わせる。

idを使ったほうが速い。classを使う場合は、その他の要素も
含めて調べた方が速いとのこと。
まったく意識していなかったので気をつける。

------

・チェーンメソッドを活用

あまりチェーンメソッドは使ってなかったので、
これも気をつける。まとめられるものはまとめる。
高速化もだけど、ソースの整理にもなる。

尚、まとめられない場合については変数化する!

------

ホスティングされているjQueryを使用する。
 また、出来るだけ新しいものを使う。

後者は当然だけど前者については、キャッシュが
効く可能性が高い為とのこと。
なので、下記みたいにgoogleの1.x系の最新を
呼び出しておけばよさそう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

------

以上。

 - jQuery

  関連記事

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

javascript_logo_unofficial-300x300
複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

jquery_logo
jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

jquery_logo
jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

javascript_logo_unofficial-300x300
ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

jquery_logo
画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

jquery_logo
jQueryのfind時に複数のセレクタ指定

<div id="hoge"> <a href="aaa.ht ...

jquery_logo
lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

jquery_logo
Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jquery_logo
jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...