JavaScriptの高速化

JavaScriptはスクリプト言語であることは先に述べましたが、クライアント側のCUPによって処理されるため、その実行速度はパソコン性能に完全に依存しています。

そこで、いかに早く処理させるかは制作者の大きな課題といってよいでしょう。

しかしながら、最近の最新ブラウザのJavaScriptエンジンは以前とは比較できないくらい早くなっているので、ここで紹介している技法は既に過去のものになっているものも多いです。あしからず。

DOMアクセス

私が頻繁に利用するのは、HTMLタグにID属性を付与してDOM呼び出しで要素を参照する方法だ。

<body>

<div id="KOKO">
test
</div>

<script type="test/javascript>
var domKOKO = document.getElementById("KOKO");
domKOKO.innerHTML = "ここ";
</script>

</body>
test

new演算子は遅い？

配列(Array)と、オブジェクト(Object)でそれぞれ実験したみたのでご覧ください。

(1)new Array()演算子

new Array()

詳細は：配列の生成 へ


new Array() その２

(2)new Object()演算子

new Object()

詳細は：オブジェクトの生成 へ


new Object() その２

(3)new演算子のまとめ

結果は、ご覧の通り思ったほどの大差ないが大方「new演算子は使わない方が無難」、と結論づけられる。
また、当然のことと言えばそれまでだが、ブラウザのバージョン(マイナー/メジャー)を新しくすればやや遅かったものが高速化されていることがわかった。

documentオブジェクト操作

このオブジェクトは頻繁に扱われるので特に気になるところだ。

new演算子の続きで、エレメントを作成するコードを比較してみることにする。エレメントを作成には一般的にdocument.createElementが使用される。

ここでは、ちょっとオブジェクト指向的記述で比較してみる。

createElement

詳細は：オブジェクトエレメントの生成 へ

結果は、ご覧の通り 劇的Befor->After！
createElement
しかし！ Windows7なのか新しいブラウザ(JavaScriptエンジン)では、互角・やや不利との結果がでました。関数呼び出しのオーバーヘッドの方が大きいようです。

今度は、一端内部変数にしてからアクセスしたら早くなるのか？

詳細は：ナビゲーターオブジェクト へ

結果は、ご覧の通り 五十歩百歩といった感じだが、IEで２割高速化されていることに注目してください。
バージョンが上がっても、Trident系は確実に高速化されている。


TOPへ
ようこそオーガスの窓へ

IT用語辞典


 GOOGLE LOGO

inserted by FC2 system