JavaScript - ブラウザの即時リフローと再ペイント

Question

別のコードが実行されていても、ブラウザから即時リフローを実行させることは可能ですか？& JavaScriptから再描画しますか？

私はプログレスバーをレンダリングしています。すべてが非同期イベントに基づいているため、サーバから、またはキャッシュからDOMアップデートをロードするときに、プログレスバーがまだ10％で静止していることがありますDOMドキュメント

display/visibility none/hidden、getComputedStyle、requestAnimationFrameですべてのトリックを試しましたが、ブラウザが実際の再描画を強制するものはありません。おそらく、キューをフラッシュしてすべての変更を適用しますが、画面に実際の再描画は行われません。

Answer 1

JavaScriptはシングルスレッド実行環境で動作します。そうではありませんが、実行中の実行コンテキストを停止したり、何か他のことをすることはできません。

たとえば、このコードスニペットを実行します。アラートが表示される前に段落のテキストが更新されますか？最終的にはそう

function foo(){ 
 
    
 
    // Note that this timer function is set to run after a zero millisecond delay 
 
    // which effectively means immediately. But, it won't do that because it must 
 
    // first finish executing the current function. So, the timer function will be 
 
    // placed in the event queue and will run as soon as the JS engine is idle. But, 
 
    // we can't know exactly when that will be, we can only ask to run the code after 
 
    // a "minimum" delay time. 
 
    setTimeout(function(){ 
 
    document.querySelector("p").textContent = "I've been updated by JS!"; 
 
    }, 0); 
 
    
 
    // The alert will run before the setTimeout function because the alert is part of the 
 
    // current execution context. No other execution context can run simultaneously with this one. 
 
    alert("While you are looking at me, check to see if the paragraph's text has changed yet."); 
 
} 
 

 
document.querySelector("button").addEventListener("click", function(){ 
 
    foo(); 
 
});

<button>Click Me</button> 
 
<p>Some content that can be updated by JS</p>

Answer 2

、setTimeoutメソッド（resolvePromise（...）、0）が助けました。これは、ブラウザに再描画のための少しの時間を与えます。