5

これらのDOM要素のプロパティのうち、ブラウザにリフロー操作を実行させる可能性があるのはどれですか？

  • innerHTML
  • offsetParent
  • style
  • scrollTop
4

3 に答える 3

12

一言で言えば、要素のサイズや移動を引き起こすプロパティは、サイズや位置の変更が他の要素に影響を与える可能性があるため、リフローを引き起こします。ブラウザは、リフローが必要になる可能性のあるものを特定するために可能な限り効率的になるように努力しますが、それを行う方法はそれぞれ異なります。

背景色などの要素のサイズや位置に影響を与えないプロパティは、リフローをトリガーしないはずですが、すべてのブラウザーがこれを実装するのに十分スマートであるという保証はありません。

あなたのリスト：

innerHTMLオブジェクトのHTMLを変更します。これは確かにサイズと位置に影響を与える可能性があり、少なくとも部分的なリフローをトリガーします。

offsetParent私には、直接設定したものではない読み取り専用プロパティのように見えるので、他の方法でまだスケジュールされていない場合は、それを読み取ってもリフローは発生しません。

styleは、多くのプロパティへのゲートウェイでheightあり、widthこれは明らかに少なくとも部分的なリフローにつながります。

scrollTop通常、レイアウトは変更されず、1つの要素（およびその子）のスクロール位置だけが変更されるため、リフローを発生させる必要はありません。レイアウトは同じままで、再ペイントが必要です。

リフローにつながるほとんどのプロパティは、すぐにはそのリフローを引き起こさず、むしろ将来の短い時間にリフローをスケジュールすることも言う価値があります。このように、それぞれがリフローを必要とする一連の異なるプロパティを変更するJavaScriptが実行された場合、ブラウザはN回のリフローを実行せず、リフローをスケジュールし、実行の現在のjavascriptスレッドが終了するのを待ちます。次に、必要なリフローを1回だけ実行します。読み取ったときに、保留中のすべてのリフローが現在実行される原因となるプロパティがいくつかあります。これは、リフローがすぐに実行されない場合、これらのプロパティの値が不正確になる可能性があるためです。これについては、この以前の投稿で読むことができます：javascriptdom操作後にInternetExplorerでDOMを強制的に更新する

于 2012-07-23T16:38:50.497 に答える
2

不思議なことに、それらすべてがリフローやリペイントを引き起こすと確信しています。

これがすべてについての記事です： リフローとリペイント

于 2012-07-23T16:33:42.070 に答える
2

場合によります。

  • innerHTMLDOMを変更するように設定した場合にのみ、リフローがトリガーされます。
  • offsetParent何もしないでください。取得すると、レンダリングツリーキューがフラッシュされる可能性があります。
  • styleそれ（またはそのプロパティ）を設定するとき、またはそれらのアクションを連鎖させるときに、リフローと再ペイントをトリガーする可能性があります。のような一部のプロパティは、color再描画のみをトリガーする必要があります。
  • scrollTop設定時に再描画をトリガーし、それを取得するとキューがフラッシュされる可能性があります。
于 2012-07-23T16:47:30.993 に答える