浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【jquery】セレクタ要素を減らして読み込みを速める方法

jqueryではセレクタを使って柔軟にcssを描画することができます。(webエンジニアさんはみんな使ったことありますよねすみません。)

最近はページ読み込みのチューニングに勤しんでいるのですが、scriptタグにasyncを付けてみたりlengthをキャッシュしたりと

色々手段を施したこともあり大分読み込みの調子が良くなってきました。あとなにができるかなーと探していたところどうやら

セレクタの余分な要素を切除することでjqueryの読み込み速度を少し向上させることができるみたいです。

こんな感じ。

 


※悪い例

$(<span class="hljs-string">'div.mark'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

$(<span class="hljs-string">'div.paint'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

 

分かりやすいですが、先頭にdivとつけてしまうと、div要素を探した後にまたもう一周div要素を探し続けるので多ければ多いほど

読み込みに不利な条件が付いてしまうという訳です。

divの部分を切除して$(‘mark’)や$(‘paint’)と定義しても問題なく動くのでページ速度の改善を望む場合はこちらの処理をすることを

おすすめします。

 

  • この記事いいね! (0)