前回はレイアの初期表示は以外に速いが、 ダイナミックにレイアウト変更をするとやっぱりパフォーマンスは悪い ということがわかりました。

　今回はこれらの測定データとその他の事情を踏まえて、 軽いページ作成の方法を考えてみましょう。

---

　軽いページといっても、ここでは JavaScript を多用した DHTMLのページなんですが、ポイントとなる項目に

1. 　初期表示の速さ
2. 　初期表示完了後の軽さ( 応答性・追従性 )

があるでしょう。

　また、「軽い」という中には

1. 　実際に軽い( 速い・応答性が良い )
2. 　軽く見える( 効率が良い )

の要因が考えられるでしょう。

　そこで、これらの場合について思いつく手法を以下に挙げてみます。

◆初期表示を速くする

　これはなんと言っても BODY部に直接 DIVタグを記述することでしょう。 特にたくさんのレイアが必要な場合は劇的に速くなること請合いです。

然し、これをやると旧バージョンのブラウザではレイアウトできませんし、 DIV内に 画像 や CGI 等が含まれる場合は onLoad のタイミングでレイアをアクセスすると 「xx has no properties」等と言われる( NN4 )場合 がありますから注意が必要です。

◆初期表示を速く見せる

　レイアを BODY部 に記述すればレイアの生成時間は速くなりますがレイア内に 画像 や CGI等がある場合はやはり表示完了までの時間がかかります。

そこで、これらのレイアのうち visibility:hidden なものは onLoad後に後 からゆっくりと生成するという手もあるでしょう。
( この手法の極端な例は BODY部に全く何も記述しないことです。 ^^; )

◆動作を速くする

　レイアに対する document.write は効率が悪い( NN4 )ので、 レイア数が多くならないなら１つのレイアに document.write するより、 必要なだけレイアを作成しておき visibility制御 や z-index制御 ( あ、これは測定していなかった... f(^^; )で行った方が良いでしょう。

　また、 レイアの移動もコスト高( IE4 )なので visibility で代用できるなら、 その方が良いでしょう。

◆動作を速く見せる

　レイアの数が多いとそれだけでかなりの負担があります( IE4 )。 それらのレイアの位置やサイズ等を一度に変更するより、 setTimeout 関数を使用して、一度に少しずつ変更することで 早く表示する工夫をすると良い場合もあるでしょう。

また、今回は測定をしていませんが、キーやマウスイベント等の応答性などを考えても、 これらのイベントの使い方を工夫して応答性や追従性を良く見せることも考えられます。 ( こちらの方は別の機会にでも... f(^^; )

---

ってことで、まとまったネタももうそろそろ尽きて来たので、 「DHTML の食えない事情」はしばらくお休みします。

また、ネタがまとまったら番外編として投稿したいと思います。

# リクエストお待ちしています。 f(^^;;

どうもありがとうございました。チャンチャン。