前回はレイアの初期表示に関するパフォーマンスを採り上げましたところ JavaScript に関しては 「IE5 は以外に速いぞ？」ってことがわかりましたが、 今回は実際にレイアを動かす場合のパフォーマンスを見てみましょう。

---

●レイアの表示制御と移動

　Web ページをダイナミックに演出する上でレイアの表示・非表示の制御、 レイアの移動は大きな要素と言えます。

　そこで、これらの要素として visibility と移動の実行時間を測定して見ましょう。

　測定は 100個のレイアに対して visibilityによる表示( inherit )と 消去( hidden )を50回繰返すスクリプトと、 10pixel の移動( NN4 では moveBy, IE4/5 では pixelLeft/Top の設定 )の 往復動作を50回繰返すスクリプトを用意して、 その実行時間を Date メソッドで計測してみました。

　以下はその結果です。

No.	項　　目	NN4	IE4	IE5
1.	visibility×100個×往復50回( レイアのみ )	659	2697	1458
2.	visibility×100個×往復50回( 文字あり )	677	2675	1467
3.	移動×100個×往復50回 ( レイアのみ )	1268	4800	2607
4.	移動×100個×往復50回 ( 文字あり )	1364	4817	2625
5.	レイアの子として「ケース3.」の測定	1198	6896	3102
※ NN4 : Netscape Communicator 4.7 IE4 : Internet Explorer 4.01(Ver.4.72.3612.1713 + SP2;Q234680 ) IE5 : Internet Explorer 5.0 (Ver.5.00.2614.3500 ) 数値の単位は msec で、各項目を10回測定した平均値 ※ このテストを行ったスクリプト http://www.din.or.jp/~hagi3/JavaScript/JSTips/NGW/No14/index.htm

いやぁ、如実に差がでますね〜。 f(^^;;

各ブラウザ毎に数値を見てみると、 NN4 ではレイアの内部に document の実体がある方が実行時間がかかるものの 殆ど影響はなさそうです。

また、移動は対象となる範囲( 上位にレイアがあるかどうか )で多少の差が 出るようです。

IE4 では大体の傾向は NN4 と同じですが、移動対象のレイアが複雑である場合 ( 上位にレイアがあるかどうか )には非常に時間がかかるようです。

IE5 では IE4 と傾向は全く同じですが、性能面で大幅な改善が図られています。 ( と言っても NN4 には遠く及びません f(^^;; )

ってことで、大雑把に言うと NN4 は IE5 の半分の時間で、 IE5 は IE4 の半分の時間で処理されるということでしょうか。

　然し、この差は何処から来るのでしょうか。 プログラムのソースを解析できる訳ではないので実体とは異なるかもしれませんが、 少し推理してみましょう。

◆visibility と 移動の差

visibility の変更は単に対象となっているレイアを表示するか、 表示せずに描画するかの差だと思いますが、 レイアを移動する場合はこれに加えて移動先でレイアの表示位置が どのように見えるかを演算( クリッピングなど )をする必要があります。 このために移動に要する処理時間は visibility 制御の２倍程度の時間が かかっていると思われます。

例えば、 visibility の代わりにフレーム外に移動する場合でもフレーム外に あるかどうかの判断をするので表の測定値程はかからないにしても、 visibility 制御の時間よりは処理時間を要します。

◆NN4 と IE4/5 の差

NN4 と IE4 の差は大体４倍の差があります。 これは、単にプログラムの作りが悪いためとは言えません。 両者の描画処理の差を考慮に入れれば、 IE4 は NN4 の４倍以上の ステップ数を実行していることになります。

通常は悪い作りと言ってもこれだけの差を作り込むのは至難の業です。:-)

では、何が影響しているのでしょうか？

問題は DOM( Document Object Model )にあると思います。 つまり、DIV オブジェクトには innerHTML, clientLeft, offsetLeft 等が、 Div.style オブジェクトには left, pixelLeft, posLeft 等のレイアの位置や形状に かかわるプロパティが沢山あります。

これらのプロパティはいずれも参照可能ですから、 「pixelLeft+=10;」といった操作をする度に全て変更されます。 これでは、簡単な操作でも影響する範囲はドキュメント全体に及びますから、 複雑な定義であればある程実行時間が増大します。

そこで、IE5 では styleオブジェクトのプロパティの意味づけを変更し、 style, currentStyle, runtimStyle に分割することで、 これらの負荷を軽減したと思われます ( 要はこれらのプロパティを状態値から単なるメモに格下げしたので 楽になったのだと思います )。

　もう少し、細かくいろんなケースを測定するとさらに面白いことが わかると思いますが、紙面の都合上今回はこれくらいにしておきましょう。 f(^^;

---

本当は、パフォーマンスの件は今回までのつもりでしたが、 このままではまとまっていないため、次回は特別偏として パフォーマンスのまとめと対策についてにしたいと思います。