peko’s Hatena Blog

ルールを守ってアクセルシンクロォォォ!!!

初心者向けjavascript高速化のまとめ

自分でやったことを絶対忘れるので纏めておく。

速度計測は下記のサイトを使用

http://jsperf.com/

数年前はサーバーサイドのプログラム書くことが多くかつ、要員計画等々数年後の保守計画を考えた際、クライアントもサーバーサイドっぽい記述をしていましたが(今考えると少し恥ずかしい)、ここ何年かクライアントサイドをかく機会がかなり増えたのでちゃんとした記述にしよーって所と、どうしても速度を出す必要があったための取り組み。

本質的な原因としては仕事でオールインワンパッケージ*1みたいなモノを使っていてそれのレスポンスが遅いので否応なく引きずられてしまったからです。

この時のボトルネックと難読化については違う記事にまとめます。

1.配列を生成時にnewを使わないで〔〕や{}

だろうなと言う内容だったけど調べたらどっちでも変わらないとか逆にnewの方が早いとか書いてる所もあり困惑自分の環境で速度計測した結果〔〕や{}の方が速度出てました。

var arr = [], var obj = {};
var
arr = new Array, var obj = new Object;
 

2.length の参照を減らす*2

いわゆるこういうやつ。

var num_arr = [1,2,.....];
for (var i = 0, len = num_arr.length; i < len; i++) {
    ...
}

3.配列の要素を追加でpushを使わない

速度に差が出るところですね

var arrs = [];
arrs[arrs.length] = ...
arrs[arrs.length] = ...

4.DOM操作系セレクタの高速化

セレクタで同じものを使うときは変数に代入して使いまわす。

jqueryを使う時、要素+classで指定してやる(IE対策)+#id要素を極力使う(場合による)。

5.個人的におぉと思ったのは下記の内容。納得したけど悲しいかな自分の環境では変化がなかった。

http://d.hatena.ne.jp/amachang/20071010/1192012056

覚えてる限り他にもあるけど取りあえずのまとめ。

自分の環境の場合、運用及び開発環境に重束縛*3があるため出来ることが限られてるのと効果も変わってくるかもなぁという所が否めず辛い。

ハイパフォーマンスJavaScript

ハイパフォーマンスJavaScript

 
jQueryクックブック

jQueryクックブック

 

*1:話せないため便宜的にこういう表現にしておきます

*2:forの初期化で配列長をキャッシュ

*3:パッケージ的束縛事項がある