なぜHTMLページは、以下のJavaScriptコードスニペットを持って、私はJSに新しいですjavascriptの

Question

の終わりにプロンプ​​トの後にdocument.writeをレンダリング：

<script type="text/javascript"> 
var eatSteak = confirm ("Do you eat steak?"); 
if (eatSteak) { 
    document.write("Here's a Steak!"); 
}else{ 
    document.write("Here's a Tofo!"); 
} 
var happy = prompt ("Are you happy?"); 
</script> 

私はクロームでコードをデバッグするとき、私は後にイエスを与える参照してくださいポップアップを確認します。それはコード "document.write（"ここにステーキ！ "）;"を打ち、HTMLページは "Here's a Steak！"と表示し、コードヒットのプロンプトポップアップを表示します。

非常にわかりにくいのは、私がChromeで実行したときです。「Here's a Steak！」プロンプトが表示された後にのみ表示されます。 document.writeのみがJavaScriptコード実行後にエフェクトをとると思われますか？またはHTMLは、JavaScriptの後にページをレンダリングし始めますか？私はグーグルでは、同様の質問や答えを見つけることができません。

Answer 1

これは、シングルスレッドのjavascriptモデルの性質です。あなたが決定を下すまで、プロンプト、アラートなどが実行を停止するので、前に行ったDOM操作のどれかが、あなたが現在のスコープから外れるまで待ってください。これはブラウザによって異なる場合がありますが、DOM操作の実装方法によって異なります。あなたがOKをクリックするまで

次のスクリプトは、以下の赤い色をブロックする（少なくともChromeで、Firefoxの上で私は動作しませんでしたそれを見て驚いた：D）

緑にsetColorをしない操作し、 setTimeoutを使用して、次の可能な時間にアラートを表示するタイマーを開始します。これは、「私はクロームでそれを実行すると、 『ここでステーキだ！』（任意のブラウザで）

// blocking call until it exits the function (at least, on Chrome, firefox seems to work) 
 
function setColorToRed() { 
 
    document.body.style.background = 'red'; 
 
    alert('Red will come after ok'); 
 
} 
 

 
// none blocking call, works on all browsers 
 
function setColorToGreen() { 
 
    document.body.style.background = 'green'; 
 
    setTimeout(function() { 
 
    alert('Green color should have been set'); 
 
    }, 0); 
 
}

<button type="button" onclick="setColorToRed()">Blocking call red</button> 
 
<button type="button" onclick="setColorToGreen()">None blocking call green</button>