jQueryやJavaScriptで認識違いしていたところのメモ(高速化)
2014/05/17
認識違いしていたり、知らなかったりでもっと高速な
処理を行えそうな点があったのでメモ。
----------
■ループの時はキャッシュを活用する
<script>
var huga;
for (var i = 1; i < 100000; i++) {
huga += $('#hoge').val();
}
</script>
<input type="checkbox" value="1" id="hoge">
<script>
var hoge = $('#hoge').val();
var huga;
for (var i = 1; i < 100000; i++) {
huga += hoge;
}
</script>
<input type="checkbox" value="1" id="hoge">
後者の方が4倍近く速かった。
一度しか使わない変数とかはまとめた方がスマートとか
勝手に解釈してたけど、4倍差は見逃せないので気をつける。
----------
■セレクタの指定の注意
<div class="huga">
<div>
<span class="hoge">
hogehoge
</span>
</div>
</div>
上記みたいなソースでclass=hogeをjQueryで操作する際、
$('.hoge')としていたけど、$('span .hoge')みたいにタグを
検索してからclassを探す方が速いとのこと。
id指定 > タグ指定 > class指定の順になるので、
出来るだけclass単体での指定は避ける。
タグからつける、ってのが知らなかった。
ただ$('div .huga div span .huga')みたいに長ったらしく書くと
余計に時間がかかる。
----------
■cssとかを弄る場合はclassを書き換える
DOMの操作は重たいのでスタイルは別途作っておいて、
addClassとかremoveClassでclassを書き換えた方が速い。
----------