Javascript - DOM再描画メソッドは同期していますか？

Question

私の質問では、DOM再描画メソッドは、DOMを変更してブラウザにページを再描画させる方法です。たとえば：

const newChildNode = /*...*/; 

document.body.appendChild(newChildNode); 

const newHeight = document.body.scrollHeight; 

このコードは、通常の状況下では正常に動作しますが、私は、ページを再描画するので、多くの要求がある場合のように、それは、高圧条件下でどのように動作するかを確認していないので。 document.body.scrollHeightを実行すると、既にnewChildNodeが画面に表示されていると想定できますか？

Answer 1

私たちは、この、3部、DOM更新、リフローでプロセスを "再描画" リペイントを分割することができます。

DOM更新：常に同期

これらの操作はすべて、同じルールに従っていません。 DOMは他のjsオブジェクトに過ぎず、その操作メソッドはすべて同期しています。

リフロー：あなたが遭遇した変な獣です。これは、ページ上の要素のすべてのボックス位置の再計算です。
一般に、ブラウザはすべてのDOMの変更が完了するまで待機し、jsストリームの終了をトリガーしてからトリガーします。
しかし、いくつかのDOMメソッドはこの操作を同期して強制します。例えば、すべてのHTMLElement.offsetXXXと同様の性質、またはElement.getBoundingClientRect、または更新された値を持つために、同期リフローをトリガーするには、ドキュメントのNode.innerTextアクセスしたり、getComputedStyle返されるオブジェクト（と、おそらく他の人）のいくつかのプロパティにアクセスします。したがって、これらのメソッド/プロパティを使用するときは注意してください。

Repaint：物事が実際にレンダリングエンジンに渡されたとき。これが起こるべきときの仕様の何も言わない。ほとんどのブラウザは次の画面の更新を待つが、それは常にそのように振舞うとは言わない。例えばChromeはalert()でスクリプトの実行をブロックしたときにそれを起動しないことが知られていますが、Firefoxはこれを実行します。