シングルスレッドはJavaScriptでDOM操作をブロックしますか？

Question

私のタイトルが正しいと願っています。私は今日インタビューをしていましたが、イベントループ/シングルスレッディングを扱う質問で困惑しました。ここにコードがあります：

function longCB(){ 
    for (var i = 0; i <= 9999; i++){ 
    console.log(i); 
    } 
    $('#status').text('hello') 
} 

$('#status').text('hi') 
longCB(); 

なぜ、DOMは#status divに 'hi'と表示されませんでしたか？ インタビュアーが完全に困惑しているのは、javascriptでのシングルスレッド化のためであり、0に設定されていてもlongCB（）にsetTimeoutを追加するだけで動作すると説明しました。イベントループ/イベントキューとコールスタックを見直した後、私はまだこれがうまくいかない理由を完全に忘れていますか？この行を使用しないでください。longCB（）を呼び出す前に行をしてはいけませんか？私は何が欠けていますか？進んでいただきありがとうございます。

Answer 1

これは、単一のスレッドがブラウザのレンダリングエンジンによって共有されるためです。 JSが同期して実行されている限り、画面上のページは更新されません。どうして？さて、あなたはこのコードを持っていたと言う：

elem.style.color = 'red'; 
elem.style.opacity = '1'; 
elem.textContent = 'Hello'; 

あなたは要素は、それがより不透明にする、その後、赤の古いテキストを表示してからこんにちはにテキストを変更したいとは思わないでしょう。テキストをただちに変更し、赤と不透明にしたいだけです。これが、すべてのJSの実行後にレンダリングが行われる理由の1つです。もう一つの理由はパフォーマンスと関係があります。レンダリングには時間がかかる！あなたはテキストがさえlongCB()を呼び出す前に、「ハイ」に設定されていることを言うとき

$('#status').text('hi') 
longCB(); 

あなたは間違っていないですが、スレッドはまだJSを実行していることから、ページがまだ再描画を取得することはできません。 setTimeoutを使用すると、将来、何らかの処理を行うためのメソッド呼び出しが追加され、ブラウザは同期スクリプトの終わりとイベントまたはタイムアウトの処理の間をレンダリングすることが保証されます。