web-dev-qa-db-ja.com

リフローとリペイントの違いは何ですか？

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

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

これは本当ですか？

javascriptperformancerepaintreflow
66
Jon Raasch

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

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

定義に関しては、その投稿から：

repaintは、視覚的に変化するがレイアウトに影響を与えない要素スキンに変更が加えられたときに発生します。

この例には、outline、visibility、background、またはcolorが含まれます。 Operaによると、ブラウザはDOMツリー内の他のすべてのノードの可視性を確認する必要があるため、再描画は高価です。

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

リフローを引き起こす例には、コンテンツの追加または削除、明示的または暗黙的なwidth、height、font-family、font-size もっと。

http://csstriggers.com で、再描画とレビューを行うcss-propertiesの効果を確認します。

79
DVK

私の意見では、リペイントはDOM自体にのみ影響しますが、リフローはページ全体に影響します。

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

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

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

6
leohxj

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

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

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

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

5
coderz

リフローは、DOMレイアウトに変更がある場合に発生します。ページ要素の寸法と位置を再度計算する必要があるため、リフローは計算上非常に高価です。画面は再描画になります。

リフローを引き起こすものの例

_for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}
_

上記のコードは非常に非効率的で、新しい段落要素が追加されるたびに100のリフロープロセスが発生します。

.createDocumentFragment()を使用して、この計算負荷の高いプロセスを軽減できます。

_const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);
_

上記のコードでは、100個の新しい段落要素の作成にリフロープロセス1xのみが使用されます。

再描画は、モニター上のピクセルの変更に過ぎませんが、リフローには手順に再描画が含まれるため、2つの悪の影響は少なくなります。

3
starWave