Loading

[jQuery] パフォーマンス向上のコツ(処理速度向上・高速化 あれこれ)

-shared-img-thumb-SAYA160312140I9A3606_TP_V

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。

1. セレクタにはクラス名だけでなく要素名も書く

/* ○class="item"の要素を取り除く */
$(".item").remove();
↓高速化
/* ○id="side"の要素直下のclass="item"の要素を取り除く */
$("#side > div.item").remove();

$(“#navi a”)と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオブジェクトとする。findを使用した場合は、#naviを検索してからa要素をjQueryオブジェクトとするため、大体のシチュエーションで処理が向上する。

$("#navi a")
↓高速化
$("#navi").find("a")

3. セレクタはClassよりもIDを利用する

idであれば一つ見つけたあと処理終了するため、idを利用した方が速くなります。

4. DOM 操作を避ける

DOM操作(prepend()、append()、after()等)は、比較的時間がかかります。代用できるならhtml()系を利用しましょう

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)

『三国天武』各種テンプレ陣形の攻め方・攻略法(アップルパイ陣形・ドーナツ陣形等)

[jQuery] jQueryでツールチップを自作する方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. CAFEonnnanoko15212650_TP_V
  2. sangokutenbu_tyoharuka
  3. 三国天武 専用神器 臥龍諸葛 八陣図
  4. sangokutenbu_kokyoku_taosikata
  5. ドラクエウォーク 混乱耐性 こころ

人気記事

  • 該当なし
PAGE TOP