再描画とリフローを回避する方法

再描画とリフローを回避する方法には、「クラスを使用してスタイルをバッチで変更する」、「CSS3 アニメーションまたは変換を使用してアニメーション効果を実現する」、「レイアウト情報を頻繁に読み取らないようにする」、「DOM 7 のドキュメント フラグメントを使用する」などがあります。タイプ: 「操作」、「アニメーションに位置を使用: 絶対または固定」、「計算結果をキャッシュ」、および「スタイルのバッチ変更」: 1. 要素のクラス属性を変更します。一度に複数のスタイルを変更できます。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

再描画とリフローはブラウザがページをレンダリングするときに必要な操作ですが、過剰な再描画とリフローはパフォーマンスの問題を引き起こします。再描画やリフローを回避するための一般的な方法は次のとおりです。

1. クラスを使用してスタイルをバッチで変更する: 要素のクラス属性を変更することで、複数のスタイルを一度に変更して再描画やリフローを回避できます。スタイルを 1 回変更すると、再描画やリフローが発生します。

2. CSS3 アニメーションまたは変換を使用してアニメーション効果を実現する: CSS3 アニメーション プロパティまたは変換プロパティを使用して、アニメーション効果を実現します。これらのプロパティは通常、リフローを引き起こすことなく GPU レベルで処理されます。パフォーマンスが向上します。 。

3. レイアウト情報の頻繁な読み取りを避ける: JavaScript では、レイアウト情報 (offsetTop、offsetLeft など) が頻繁に読み取られると、ブラウザーが強制的にリフローされます。このような操作を避けるか、キャッシュしてリフローの回数を減らすようにしてください。

4. DOM 操作にドキュメント フラグメント (DocumentFragment) を使用する: 最初にドキュメント フラグメントを作成し、それに対して DOM 操作を実行し、最後にドキュメント フラグメントをドキュメントに一度に追加することで、コストを削減できます。頻繁な逆流。

5. アニメーションにposition:absoluteまたはfixedを使用する:他の要素のレイアウトに影響を与えないように、他の要素を基準にしてposition:absoluteまたはfixed相対位置を使用します。

6. 計算結果をキャッシュする: 計算結果を複数回読み取る必要がある場合は、結果をキャッシュして計算の繰り返しを避け、リフローの回数を減らすことができます。

7. スタイルのバッチ変更: 要素のスタイルを複数回変更する必要がある場合は、クラス属性を直接変更するのではなく、クラス属性を変更してすべてのスタイルを一度に適用することをお勧めします。要素を複数回、style 属性を使用します。

一般に、スタイルの頻繁な変更を避ける、適切な CSS プロパティを使用してアニメーション効果を実現する、レイアウト情報の頻繁な読み取りを減らす、DOM 操作を合理的に最適化するなどの方法はすべて役に立ちます。再描画とリフローにより、ページのパフォーマンスとユーザー エクスペリエンスが向上します。

以上が再描画とリフローを回避する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。