Loading

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


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のその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

  1. 『Excel VBA』マクロで月の日数を取得する(当月・前月・翌月)

    2016.08.02
  2. [PHP] ショートカット(短縮)URL取得 with Google短縮URL …

    2016.05.09
  3. [CSS] CSSだけで手軽にコピー禁止する方法!

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

    2020.05.17
  5. [jQuery] カーソルをあてた時に画像を切り替える方法(マウスオーバー・マウ…

    2018.06.20
  6. [PHP] igo-phpを用いた形態素解析〜タグクラウド自作に向けて〜

    2016.05.05

コメント

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

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

CAPTCHA


New Article

  1. ChatGPTで遊ぶ おもしろい使い方まとめ
  2. ドラクエウォーク スロット どっちがいい
  3. 三國志真戦 戦法中国語翻訳
  4. ドラクエウォーク 2023年装備ガチャ
  5. ドラクエウォーク 覚醒千里行
PAGE TOP