1. ホーム
  2. javascript

[解決済み] リフローとリペイントの違いは何ですか?

2023-04-03 21:04:45

質問

リフローとリペイントの違いについて少し不明です(もし違いがあるのであれば)。

reflow はさまざまな DOM 要素の位置を移動させるようで、repaint は単に新しいオブジェクトをレンダリングするようです。 たとえば、リフローは要素を削除するときに発生し、再描画はその色を変更するときに発生します。

これは本当ですか?

どのように解決するのですか?

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

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

定義については、その記事から。

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

この例としては outline , visibility , background , または color . Operaによれば,再描画は は高価です。 他のすべてのノードの可視性を確認する必要があるため ノードを検証する必要があるためです。

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

リフローを引き起こす例としては、コンテンツの追加や削除、明示的または暗黙的な width , height , font-family , font-size などがあります。

どのcss-propertyがrepaintに影響するかは、以下を参照してください。 http://csstriggers.com