html - DOM ノードは同期していますか?

Question

スタイル情報の観点から、DOM ノードの属性が同期しているかどうか疑問に思っていました。次の記事を読んでいて、次の行を読みました

「offsetHeight」などのスタイル情報を要求するスクリプトは、インクリメンタル レイアウトを同期的にトリガーできます。

記事から、ドキュメントが完全にレイアウトされるまでスクリプトの実行を一時停止する「ダーティ ノード」システムがあることを示しているようです。したがって、ダーティ ノード n があった場合、n.offsetHeight が JavaScript から呼び出された場合、この記事では、オフセットの高さが完全に具体化されるまで n.offsetHeight は返されないことを示唆しています。これについての私の理解は正しいですか？添付された DOM 要素の現在の安定したバージョンを常に提供してくれるブラウザーに頼ることはできますか?

簡潔に言えば、(スタイル属性、クラス名、動的 css などを使用して) ノードのスタイリングを変更し、そのスタイリングに依存するプロパティを読み取った場合、返される値が以前のスタイリングが適用されたノードの値になりますか? そうでない場合、スタイリングの変更がいつ適用されたかを知るにはどうすればよいですか?

Answer 1

DOM 要素から情報を読み取ると、常に現在の値が取得され、他のプロパティまたは他の要素に依存するプロパティは、それらを読み取るときに常に正しく計算されます。

レイアウトが変更されるように DOM を変更すると、変更を行ったときにすべての要素が直接再計算されるわけではありません。別の再計算が必要な何かをさらに変更すると、それは無駄になります。再計算の必要がない限り、レイアウトは未計算のままです。その再計算に依存するプロパティを読み取ると、値が返される前に実行されます。

そのため、プロパティの設定方法と読み取り方法を計画することで、不要な再計算を回避できます。