リフローとリペイントの違いが少しわかりません(違いがある場合)
リフローがさまざまなDOM要素の位置をシフトしているように見えます。ここで、リペイントは新しいオブジェクトをレンダリングしているだけです。たとえば、要素を削除するとリフローが発生し、色を変更すると再ペイントが発生します。
これは本当ですか?
リフローとリペイントの違いが少しわかりません(違いがある場合)
リフローがさまざまなDOM要素の位置をシフトしているように見えます。ここで、リペイントは新しいオブジェクトをレンダリングしているだけです。たとえば、要素を削除するとリフローが発生し、色を変更すると再ペイントが発生します。
これは本当ですか?
この投稿は、リフローとリペイントのパフォーマンスの問題をカバーしているようです
定義については、その投稿から:
再描画は、目に見えて変化する要素スキンに変更が加えられたときに発生しますが、そのレイアウトには影響しません。
この例には、、、、、
outline
またはvisibility
がbackground
含まれcolor
ます。Operaによると、ブラウザはDOMツリー内の他のすべてのノードの可視性を検証する必要があるため、再描画にはコストがかかります。リフローは、ページの一部(またはページ全体)のレイアウトに影響を与える変更を伴うため、パフォーマンスにとってさらに重要です。
リフローの原因となる例には、コンテンツの追加または削除、明示的または暗黙的な変更、、、など
width
がheight
ありfont-family
ますfont-size
。
http://csstriggers.comで、どのcss-properties効果が再描画およびレビューするかを確認してください。
私の意見では、再描画は DOM 自体に影響するだけですが、リフローはページ全体に影響します。
色や可視性など、スキン スタイルのみが変更されると、再描画が発生します。
リフローは、DOM のページがレイアウトを変更するときに発生します。
最近、リペイントまたはリフローをトリガーする属性を検索できるサイトを見つけました。 http://csstriggers.com/
ここに別の素晴らしい投稿があります: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
再描画または再描画は、すべての要素を調べて、それらの可視性、色、輪郭、およびその他の視覚スタイル プロパティを決定し、画面の関連部分を更新します。
リフローは、ページのレイアウトを計算します。要素のリフローは、要素の寸法と位置を再計算し、その要素の子、祖先、および DOM でその後に表示される要素のリフローもトリガーします。次に、最終的な再描画を呼び出します。リフローは非常に高価です。
また、リフローが発生するタイミングと、リフローを最小限に抑える方法についても紹介しました。