89

リフローとリペイントの違いが少しわかりません(違いがある場合)

リフローがさまざまなDOM要素の位置をシフトしているように見えます。ここで、リペイントは新しいオブジェクトをレンダリングしているだけです。たとえば、要素を削除するとリフローが発生し、色を変更すると再ペイントが発生します。

これは本当ですか?

4

5 に答える 5

103

この投稿は、リフローとリペイントのパフォーマンスの問題をカバーしているようです

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

定義については、その投稿から:

再描画は、目に見えて変化する要素スキンに変更が加えられたときに発生しますが、そのレイアウトには影響しません。

この例には、、、、、 outlineまたはvisibilitybackground含まれcolorます。Operaによると、ブラウザはDOMツリー内の他のすべてのノードの可視性を検証する必要があるため、再描画にはコストがかかります。

リフローは、ページの一部(またはページ全体)のレイアウトに影響を与える変更を伴うため、パフォーマンスにとってさらに重要です。

リフローの原因となる例には、コンテンツの追加または削除、明示的または暗黙的な変更、、、などwidthheightありfont-familyますfont-size

http://csstriggers.comで、どのcss-properties効果が再描画およびレビューするかを確認してください。

于 2010-03-30T23:06:01.527 に答える
11

ここで見つけた素晴らしい説明。

ここに画像の説明を入力

  • Reflow: 各可視要素のレイアウト (位置とサイズ) を計算します。
  • Repaint: ピクセルを画面にレンダリングします。
于 2020-01-21T17:36:21.797 に答える
8

私の意見では、再描画は DOM 自体に影響するだけですが、リフローはページ全体に影響します。

色や可視性など、スキン スタイルのみが変更されると、再描画が発生します。

リフローは、DOM のページがレイアウトを変更するときに発生します。

最近、リペイントまたはリフローをトリガーする属性を検索できるサイトを見つけました。 http://csstriggers.com/

于 2015-01-07T04:00:19.027 に答える
7

ここに別の素晴らしい投稿があります: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

再描画または再描画は、すべての要素を調べて、それらの可視性、色、輪郭、およびその他の視覚スタイル プロパティを決定し、画面の関連部分を更新します。

リフローは、ページのレイアウトを計算します。要素のリフローは、要素の寸法と位置を再計算し、その要素の子、祖先、および DOM でその後に表示される要素のリフローもトリガーします。次に、最終的な再描画を呼び出します。リフローは非常に高価です。

また、リフローが発生するタイミングと、リフローを最小限に抑える方法についても紹介しました。

于 2015-07-26T20:21:40.910 に答える