【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’)と定義しても問題なく動くのでページ速度の改善を望む場合はこちらの処理をすることを

おすすめします。

 

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG