JavaScriptのパフォーマンス最適化（リペイントとリフロー）_基礎知識

コードをコピーします コードは次のとおりです:

再描画 (再描画)、再描画が変更された場合、要素の外観は変更されますが、レイアウトは変更されません。たとえば、アウトライン、可視性、背景色を変更しても、DOM 構造のレンダリングには影響しません。

リフロー (レンダリング)、再ペイントとの違いは、DOM 構造のレンダリングに影響を与えると同時に、再ペイントをトリガーし、それ自体とすべての親要素 (祖先) を変更することです。このオーバーヘッドは非常に大きくなります。コストがかかるため、パフォーマンスが低下することは避けられず、ページ要素が増えれば増えるほど、その影響はより顕著になります。

発生時:
DOM 要素の追加、変更 (コンテンツ)、削除 (リフロー再ペイント)
。DOM 要素のフォントの色のみを変更します (調整する必要がないため、再ペイントのみ)。 layout)
。要素
の外観に影響するプロパティを変更します。ブラウザ ウィンドウのサイズを変更し、ページをスクロールします。要素の特定のプロパティ (offsetLeft、offsetTop、offsetHeight、scrollTop) を読み取ります。 /Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(IE))

回避方法:

。まずドキュメントから要素を削除し、変更が完了したら要素を元の位置に戻します。
。変更が完了したら、表示を変更します。これは元の値
です。複数の DOM ノードを作成する必要がある場合は、DocumentFragment を使用してそれらを一度にドキュメントに追加できます

var flagment = document.createDocumentFragment();

fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
. スタイルの変更に焦点を当てる
4.1 要素スタイルの属性を次のように変更します。できるだけ少なく
4.2 classNameを変更してスタイルを変更してみる
4.3 cssText属性でスタイル値を設定する
element.style.width=”80px” //reflow
element.style; .height=”90px” ; //reflow
element.style.border=”solid 1px red”; //reflow
上記は、より多くの呼び出しが行われるほど、より多くの
要素を生成します。 .style.cssText=” width:80px;height:80px;border:solid 1px red;”; //reflow
4.4 レイアウト属性値のキャッシュ
var left=elem.offsetLeft; を複数回使用すると、 reflow
4.5 要素の位置を絶対または固定に設定します
要素は標準フローから分離され、DOM ツリー構造からも分離されます。 リフローが必要な場合は、それ自体と従属要素のみをリフローします
4.6テーブル レイアウトは使用しないようにしてください
テーブル要素 リフローがトリガーされると、テーブル内の他のすべての要素がリフローされます。テーブルが使用に適している場合は、テーブル レイアウトを自動または固定に設定して、テーブルを 1 行ずつレンダリングできるようにすることができます。このアプローチは、リフローの影響範囲を制限することにもなります。
4.7 式の使用は避けてください。呼び出されるたびに再計算(ページの読み込みも含む)
が表示されます。

参考:

Yahoo! パフォーマンス エンジニア Nicole Sullivan の最新記事「リフローと再描画: CSS パフォーマンスにより JavaScript が遅くなる?」