勉強したことのメモ

webプログラマが勉強したことのメモ。

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を書き換えた方が速い。

----------

 - JavaScript

  関連記事

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

GoogleMapで都道府県の中心地と県庁所在地

GoogleMapで都道府県の中心地もしくは県庁所在地にマーカーを立てたかった。 ...

Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...

JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...