web-dev-qa-db-ja.com

DOM環境ではいつリフローが発生しますか？

DOMを使用してWebページのリフローをトリガーするのはどのようなアクティビティですか？

見方が違うようです。 http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ によると、それは起こります

  • DOMノードを追加または削除したとき。
  • スタイルを動的に適用する場合（element.style.width = "10px"など）。
  • OffsetWidth、clientHeight、または計算されたCSS値（DOM準拠のブラウザーのgetComputedStyle（）またはIEのcurrentStyleを介して）へのアクセスなど、計算する必要がある測定値を取得するとき。

ただし、 http://dev.opera.com/articles/view/efficient-javascript/?page= によると、測定を実行すると、すでにリフローアクションがキューにある場合にのみリフローがトリガーされます。

誰か他にアイデアはありますか？

javascriptperformancedomreflow
50
Morgan Cheng

どちらの記事も正しいです。 DOM内の要素の寸法を計算することが合理的に必要となる可能性のある何かを実行しているときはいつでも、リフローをトリガーするものと想定できます。

また、私の知る限り、どちらの記事も同じことを言っています。

最初の記事では、次の場合にリフローが発生すると述べています。

計算する必要がある測定値を取得する、たとえばoffsetWidth、clientHeight、または計算されたCSS値（getComputedStyle （） DOM準拠のブラウザまたはIEのcurrentStyle）では、DOMの変更はキューに入れられて行われます。

2番目の記事は述べています：

前述のように、ブラウザはいくつかの変更をキャッシュし、それらの変更がすべて行われたときに一度だけリフローします。ただし、要素の測定を行うと、要素が強制的にリフローされるであることに注意してください。これにより、測定が正確になります。変更は目に見えるように再描画される場合とされない場合がありますが、リフロー自体は舞台裏で発生する必要があります。

この効果は、測定がoffsetWidthなどのプロパティを使用して、またはgetComputedStyleなどのメソッドを使用して行われたときに作成されます。数値が使用されていない場合でも、ブラウザーが変更をキャッシュしている間にこれらのいずれかを使用するだけで、非表示のリフローがトリガーされます。これらの測定を繰り返し行う場合は、一度だけ測定し、後で使用できるように結果を保存することを検討してください。

私はこれを彼らが以前に言ったのと同じことを意味すると思います。 Operaは、値をキャッシュするために最も努力し、リフローを回避しますが、そうする能力に依存すべきではありません。

すべての意図と目的のために、3種類の相互作用すべてがリフローを引き起こす可能性があると彼らが言うとき、両方が言うことを信じてください。

乾杯。

45
coderjoe

Internet Explorerのレンダリング動作を理解する の「プロパティの読み取りアクセスによってトリガーされるレンダリング」セクションをご覧ください。IEの次のコードはレンダリングアクティビティを引き起こします。

function askforHeight () {
  $("#lower").height();  
}
3
Kevin Hakanson
document.body.style.display = 'none';
document.body.style.display = 'block';

これにより、これらの理解できないレイアウトのバグがしばしば解決されます。

1
I.devries