Web ページのパフォーマンスの向上: 再描画とリフローを減らすためのヒント

Web ページのパフォーマンスの最適化: 再描画とリフローを回避するためのヒント

モバイル デバイスの普及と Web コンテンツの継続的な増加に伴い、ユーザーの要求はますます高くなっています。ウェブページのパフォーマンスはますます高くなります。 Web ページのパフォーマンスを最適化するプロセスでは、再描画とリフローという 2 つの非常に重要な概念に遭遇することがよくあります。これら 2 つの概念は Web ページのパフォーマンスに大きな影響を与えます。再描画とリフローを正しく回避または削減すると、Web ページの読み込み速度とユーザー エクスペリエンスが大幅に向上します。この記事では、開発者が Web ページのパフォーマンスを最適化できるように、再描画およびリフローを回避するテクニックをいくつか紹介します。

1. 再描画とリフローとは

再描画とは、DOM 要素のスタイル属性が変更されてもそのレイアウトには影響しない場合に、ブラウザーが新しいスタイルを画面上に描画することを意味します。再描画操作が実行されます。再描画操作には要素のサイズや位置の再計算が含まれないため、コストが低くなります。

リフローとは、DOM 要素のレイアウト属性が変更されると、ブラウザが要素のサイズと位置を再計算し、他の関連要素を再配置する、つまりリフロー操作を実行することを意味します。リフロー操作は比較的高価であり、ページの再描画やちらつきの問題さえも引き起こす可能性があります。

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

1. 上/左属性の代わりにtransformを使用する

transform属性を使用して要素の位置を変換するを使用するよりも優れています。 top 属性と left 属性は、要素を効率的に配置するために使用されます。これは、transform プロパティが GPU によって処理され、リフローや再描画が発生しないためです。したがって、要素の移動が必要な操作の場合は、top 属性と left 属性の代わりに、transform 属性を使用するようにしてください。

2. display:none

display:none プロパティの代わりに可視性を使用すると、要素がドキュメント フローから消え、リフローと再描画がトリガーされます。 Visibility:hidden 属性は再描画のみをトリガーし、リフローはトリガーしません。要素の表示と非表示を切り替える必要がある場合は、visibility 属性を使用してリフロー操作を回避してください。

3. スタイル属性の頻繁な操作を避ける

要素に対してスタイル操作を実行する必要がある場合は、操作を複数の操作に分散させるのではなく、1 つの操作に集中するようにしてください。 。スタイル プロパティに対するすべての操作でリフローと再描画がトリガーされるため、操作を 1 つの操作に集中させると、リフローの数が減り、パフォーマンスが向上します。クラスを使用して複数のスタイル プロパティを一度に変更したり、メソッドを使用してドキュメント フローから要素を取り出してリフローを回避したりできます。

4. DocumentFragment を使用する

多数の DOM 要素を挿入する必要がある場合、DocumentFragment を使用してキャッシュし、リフローの回数を減らすことができます。 DocumentFragment は、DocumentFragment をドキュメントに一度に挿入することで DOM 要素を操作し、リフローを減らすことができる軽量のドキュメント オブジェクトです。

5. レイアウト属性の頻繁な操作を避ける

レイアウト属性には、要素の幅、高さ、マージン、内側のマージンなどが含まれます。これらの属性を操作すると、リフローと再ペイントをトリガーします。したがって、要素のレイアウト属性を頻繁に変更することは避け、位置指定、絶対位置指定、フローティングなどの方法を使用してください。

6. CSS3 アニメーションとトランジションの使用

CSS3 アニメーションとトランジションを使用すると、ハードウェア アクセラレーションを使用してページをアニメーション化できます。 JavaScript を使用してアニメーション効果を実現する場合と比較して、CSS3 アニメーションとトランジションを使用するとパフォーマンスが向上し、リフローと再描画の回数を減らすことができます。

7. スロットルと手ぶれ補正を使用する

スクロール、ウィンドウ サイズの変更、その他のイベントを監視する必要がある場合は、スロットルと手ぶれ補正を使用して、イベントのトリガー時間が短縮され、リフローと再描画の回数が削減されます。絞りとは一定時間内に一度だけ動作を行うことをいい、手ぶれ補正とは一定時間動作を停止した後に再度動作を行うことをいいます。

概要

Web ページのパフォーマンスの最適化は、あらゆる側面を総合的に考慮するタスクです。再描画とリフローは、Web ページのパフォーマンスに影響を与える 2 つの重要な要素です。再描画やリフローを合理的に回避することで、Web ページの読み込み速度が向上し、ユーザーの待ち時間が短縮され、ユーザー エクスペリエンスが向上します。この記事では、top/left プロパティの代わりにtransformを使用する、display:noneの代わりにvisibilityを使用するなど、再描画とリフローを回避するいくつかのテクニックを紹介します。これらのヒントが、開発者が Web ページのパフォーマンスを最適化し、より良いユーザー エクスペリエンスを提供するのに役立つことを願っています。

以上がWeb ページのパフォーマンスの向上: 再描画とリフローを減らすためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。