こっぱみぢんこ

引き続きバージョン・アップ

プログラムを作るときに気をつけていること。

安定性。エラーや例外の発生時まで含めて。
可読性。見た目にも構造的にも綺麗なこと。読み易く、手を入れ易いこと。
高速性。

1番目は、個人的に作るものでは程々だが、仕事では最優先。言うまでも無いか。動作環境がバリエーション豊かだったりすると、かなり面倒だったりする。

2番目と3番目とでは、2番目が優先。昔はこの両立に苦労したんだよな。構造的に綺麗なコードは、たいてい遅いのだ。でも、最近はハードウェアの性能が上がったからね。まず綺麗に書いて動かしてみて、遅いようだったらボトルネックの部分に手を入れて、という感じ。 CPUの処理速度とかメモリのサイズとかを気にしなくてもいいなんて、便利な世の中になったよなぁ。って、俺は爺さんか。

そうは言っても、だ。性能はハードウェアが補ってくれるとはいえ、実行速度はやはり気になる。ちょっとしたことでグッと速くなるのなら、ちょっとしておきたい。ということで、昔作ったオモチャに手を入れている中で効果があった、ちょっとしたことたち。 Firefox2,Opera9,IE7のJavaScriptがターゲット。

その１


var nodes = domElement.childNodes;
for ( var i = 0; i < nodes.length; i++ ) {

と書くよりは、


var nodes = domElement.childNodes;
for ( var i = 0, len = nodes.length; i < len; i++ ) {

と書いた方がいい。普通のデータの配列なら大差無いが、DOM要素集合だと激しく有効。

その２


var element = document.getElementById( "id" );
element.style.color = "#ff0000";
element.style.left  = "100px";
…

と書くよりは、


var style = document.getElementById( "id" ).style;
style.color = "#ff0000";
style.left  = "100px";
…

と書いた方が速い。 style の1つしか設定しないならどうでもいいが、扱う属性が多い場合は有効。

あと、微妙なのは innerHTML を使うかどうか。一般に遅いとされているけど、ある程度以上複雑なDOM要素を貼り付けるときは、innerHTML の方がかなり速かったりする。この「ある程度」の境界がどの辺りにあるかが、今一つはっきりしないんだよね。その境界を探るのが面倒（むしろ無意味）なのと、イベント処理をW3Cスタイルでやるときの記述が面倒になるのとで、結局は殆ど使わないんだけど。

ブラウザに関して言えば、JavaScript の性能は Opera が最速。次いで Firefox か。作りやすいのは、実装も環境も含めて Firefox が最強。 Firebug は、一度使ったらもう手放せない。でも、世間の主流は今尚IE6なんだよなぁ。さっさと消えてくれないかな。

2007 07 07

引き続きバージョン・アップ

その１

その２