javascript - レイアウト情報にアクセスすると、ブラウザのリフローも発生する可能性がありますか？

Question

スタイルプロパティを設定すると、ブラウザのリフローが発生することを知っています。レイアウトプロパティにアクセスしているときにもブラウザのリフローが発生する可能性はありますか？はいの場合、ブラウザのリフローが発生する理由を具体的に例を挙げてください。

Answer 1

もちろん、実装によって異なりますが、通常、ブラウザは、レイアウトデータを再クエリする必要があると判断した場合（つまり、この要素のレイアウト関連のプロパティまたは親要素が変更された場合）、要素のプロパティを読み取るとリフローをトリガーします。

WebKitの影響を受けるプロパティのリストは、次の場所にあります。WebKitでレイアウトをトリガーする方法（しない）。例を含むより一般的な記事：レンダリング：リペイント、リフロー/リレイアウト、リスタイル

Answer 2

プロパティを取得することは可能ですが（以下を参照）、プロパティを変更することは可能です。ele.widthインスタンスのようなスタイル関連のプロパティ。srciframeやimgタグなどの場所のプロパティはそうなります。

また、イベントリスナー（、、など）をアタッチすると、リフローが発生することに注意してon*=...くださいaddEventListener(*,...)。これは、イベントが最も外側の親要素からsrc要素に移動し、src要素から親要素チェーンを介してバブルアウトする方法が原因です。

さらに、最近のブラウザ（Chromeなど）は、指定されたページが表示されない限り、GUIの更新を遅らせます。これにより、ブラウザがページを正しく表示していることを確認しているため、ページが再びアクティブになったときにリフローが発生します。この遅延/キューにより、プロパティの取得がリフローを引き起こしているように見える場合があります。実際には、ブラウザが正しく表示されていることを確認しています。

Answer 3

CSSプロパティを変更せず、アクセスするだけの場合は、いいえ、ページを再レンダリングする必要はありません。

Answer 4

私はこれがゲームに遅れていることを知っています、そしてあなたが他の人がすでに投稿したリンクを読んだらあなたが見つけることができる方法で答えます、しかしそれはここに明確に述べられるに値します：

ブラウザは現在の値を提供する役割を担っています。そのため、原則として、ブラウザはリフローと再描画を行って、現在の値を確認します。このように考えると役立つと思います。ページ上の任意の要素の位置またはサイズを要求するときはいつでも、リフロー/リペイントを引き起こすと想定できます。いいえ、100％常に正しいとは限りませんが、100％に十分近いため、上、左、下、右、高さ、幅、またはこれらの測定値に影響を与えるもの（スケール、ローテーションなど）を要求する場合は、100％に近いと見なす必要があります。など）、R/Rを発生させます。それは私があなたに与えることができるのと同じくらい具体的な答えです。

繰り返しになりますが、これは常に100％真実ではありませんが、そのように考えると、98％の確率で真実であり、他の2％ほど害はないことがわかります。それは98に役立ちます。