52

どのような種類のアクティビティが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 = 3によると、測定を行うと、リフローアクションがすでにキューに入れられている場合にのみリフローがトリガーされます。

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

4

3 に答える 3

49

どちらの記事も正しいです。DOM 内の要素のサイズを合理的に計算する必要があるようなことをしているときはいつでも、リフローをトリガーすると安全に想定できます。

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

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

offsetWidth、clientHeight、または計算された CSS 値 ( DOM 準拠ブラウザーのgetComputedStyle()または IE の currentStyle を介して)へのアクセスなど、計算が必要な測定値を取得するときに、DOM の変更が行われるためにキューに入れられます。

2番目の記事は次のように述べています。

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

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

私はこれを、彼らが以前に言ったのと同じことを意味すると考えています。Opera は値をキャッシュし、リフローを回避するために最善を尽くしますが、その機能に頼るべきではありません。

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

乾杯。

于 2009-08-14T14:33:37.907 に答える
4

「Internet Explorer のレンダリング動作について」の「プロパティ読み取りアクセスによってトリガーされるレンダリング」セクションを参照してください。ここでは、IE の次のコードによってレンダリング アクティビティが発生します。

function askforHeight () {
  $("#lower").height();  
}
于 2010-09-21T15:20:52.730 に答える
1 
document.body.style.display = 'none';
document.body.style.display = 'block';

これにより、理解できないレイアウトのバグが解決されることがよくあります。

于 2009-02-04T07:45:02.043 に答える