描画処理は別スレッドだ
2007年7月20日
javascriptで
document.getElementById("element_id").style.display = "inline";
のように、HTMLや画像の表示を変えた場合に
そのブラウザの描画処理自体は別スレッド化するみたいです。
例えば、こんな処理の場合
// elementはHTML要素のオブジェクト element.style.display = "inline"; var devnull = 1;
“inline”を代入したタイミングでブラウザの描画処理が始まりますが
描画処理の途中に”var devnull = 1;”が同時に動いているような、イメージ的にはそんな感じ。
具体的に言うと
こういうイベント↓を設定したときには
こういうイベント↓を設定したときには
// waitingはHTML要素のオブジェクト // リクエスト送信中の「お待ち下さい」の表示を行うための要素 waiting.style.display = "inline"; // prototype.jsを使った例となっています new Ajax.Request("/path/to/filename.txt", { method: "get" // 同期通信を選択 ,asynchronous: false ,onComplete: function(http){ /* 何か処理 */ // 処理が終わったら、「お待ち下さい」を非表示にする waiting.style.display = "none"; } });
イベントを発動させても
おそらく、「お待ち下さい」は表示されません。
というのもこの場合
まず、「waiting.style.display = “inline”;」によりブラウザは描画処理を始めますが、JSのプロセスは先に進みます。
次に、同期通信によるリクエスト送信が行われますが、同期通信は画面をフリーズさせる(*1)ため、その間の描画処理はされません。
ということで、折角表示しようとして「お待ち下さい」は、同期通信の画面フリーズにより表示されなくなります。
(*1) 画面をフリーズさせているように見えますが、正確なところはわかりません。
(**) XP-IE6とXP-FireFox2で確認しました
(**) “,asynchronous: false”をコメントアウトして非同期通信にすると、レスポンス待ちの間に表示されるようになります。
以上、上記の話は自分の調査のみの話なので、間違っているところは多々あるかもしれません。