ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【jQuery】jQueryの高速化

バージョンを分ける

引用元
jQuery高速化!処理速度を10倍上げるテクニック20選

jQuery 2.x 系
モダンブラウザに最適化されたバージョン(IE6/7/8はサポート対象外)
jQuery 1.x 系
古いブラウザにも対応したバージョン

IE9以上ならなら2.x系をIE9以下なら1.x系を読み込む

<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<![endif]-->

IEに対する条件付きコメント

引用元
IEに対する条件付きコメントを記述する。 | dakkie blog

  • IE以外のブラウザ
<!--[if !IE]> ~ <![endif]-->
  • 特定のバージョン
<!--[if IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン未満
<!--[if lt IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン以下
<!--[if lte IE 〇〇]> ~ <![endif]-->
  • 特定のバージョンより上のバージョン
<!--[if gt IE 〇〇]> ~ <![endif]-->
  • 特定のバージョン以上
<!--[if ggte IE 〇〇]> ~ <![endif]-->

高速化の為のコードの書き方

引用元
JavaScript・jQueryの改修・高速化のためのメモ - Qiita

  • javascriptはページ下部に記載
  • 画面描画に関係ないJavaScriptは、の直前に書く
  • CSSJavaScriptは外部ファイルで作成
  • ディレクトリ指定時には、"/"をつける
  • DOM操作の回数を減らす(DOMを読み込む回数を減らす?)
  • 配列をforで回す時は、array.lengthも変数に格納
  • 頻繁に使うオブジェクトは変数に格納
  • メソッドチェーンを使用
  • id属性を多様する(JavaScriptではDOMへのアクセスの際にid属性で検索するのが最も高速)
  • IE6,7の場合、クラスセレクタに要素名をつける
  • 配列からの取り出しはeachよりforを使う。
  • セレクタはなるべくシンプルに
  • 要素を参照する時は、範囲を指定
  • findメソッドを利用(querySelectorメソッドよりは遅くなる)
find
セレクタを絞っていく

p内のspanを全て指定。

$("p").find("span").css("color","red");
querySelector()メソッド
CSS セレクタにマッチする文書中の最初の要素返す