勉強したことのメモ

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で三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

ユーザーエージェントなどユーザー情報を取得する方法

上からUA、IP、ホスト名を取得。 $ua = $_SERVER['HTTP_U ...

GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...