それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

描画処理は別スレッドだ

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”をコメントアウトして非同期通信にすると、レスポンス待ちの間に表示されるようになります。

以上、上記の話は自分の調査のみの話なので、間違っているところは多々あるかもしれません。


コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives