勉強したことのメモ

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:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...

javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

GoogleMapAPIで現在地取得と目的地までのルート表示

GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させ ...