Web ページのパフォーマンスの向上: リフローと再描画のストレスを軽減します。

Web ページのパフォーマンスの最適化: リフローと再描画による負担を軽減します。具体的なコード例が必要です。

インターネットが急速に発展している現在の時代では、Web サイトのパフォーマンスは重要ではありません。これはユーザーエクスペリエンスにとって非常に重要であり、Web サイトのランキングにとって非常に重要です。ユーザーは、Web サイトを開いたときに、読み込みプロセスを待つのではなく、すぐにコンテンツが表示されることを期待しています。したがって、Web ページのパフォーマンスの最適化は、すべての Web 開発者が追求すべき目標の 1 つになっています。

Web ページのパフォーマンスの最適化はさまざまな側面から始めることができますが、その中でも、Web ページのパフォーマンスを向上させるには、リフローと再ペイントの操作を減らすことが重要です。リフローと再描画はブラウザが Web ページをレンダリングするときの基本的な操作ですが、これらが頻繁に発生すると Web ページのレンダリングが遅くなり、ユーザー エクスペリエンスに影響します。この記事では、リフロー操作と再描画操作を減らす方法を検討し、具体的なコード例を示します。

リフローと再描画の概念
リフロー (リフロー) とは、ブラウザが Web ページをレンダリングするときに、DOM 要素のサイズと位置に基づいて Web ページのレイアウトを計算し、再描画することを指します。それを画面に表示する処理を行います。再描画とは、DOM 要素のスタイルに従って要素を再描画するプロセスを指します。リフローおよび再描画操作は時間のかかる操作であるため、頻繁に行わないようにする必要があります。

リフローと再描画の操作を減らす方法

1. CSS3 のtransform プロパティと opacity プロパティを使用する
   要素の位置とサイズを変更する場合、CSS3 のtransform プロパティを使用できます。要素の left、top、width、height プロパティを直接変更する代わりに。なぜなら、transform 属性は再描画のみを引き起こし、リフローを引き起こさないからです。同様に、不透明度属性を使用して要素の透明度を変更できます。これにより、再描画のみが行われます。

// 例: 変換を使用して左と上の属性を置き換えます
// 推奨されません:
element.style.left = '100px';
element.style。 top = '100px';

// 推奨:
element.style.transform = 'translate(100px, 100px)';

2. DOM 要素のバッチ操作
   when need 複数の DOM 要素に変更を加える場合は、複数の個別の操作を使用することを避け、それらを 1 つのバッチ操作に結合してください。 DOM 上の各操作はリフロー操作と再描画操作をトリガーするため、バッチ操作によりリフロー操作と再描画操作の数が減り、パフォーマンスが向上します。

// 例: DOM 要素のバッチ操作
// 非推奨:
element1.style.width = '100px';
element2.style.width = '200px ' ;
// 各操作によりリフローと再描画がトリガーされます。

// 推奨:
element1.style.width = '100px';
element2.style.width = '200px ';
// 1 つの操作でトリガーされるリフローと再描画は 1 つだけです。

3. レイアウト情報への頻繁なアクセスを避ける
   JavaScript を介して DOM 要素のレイアウト情報 (offsetLeft、offsetHeight など) にアクセスするブラウザがリフロー操作を実行します。そのため、レイアウト情報への頻繁なアクセスを避け、レ​​イアウト情報をキャッシュして計算の繰り返しを避けることができます。

// 例: レイアウト情報への頻繁なアクセスを避ける
// 推奨されません:
const height = element.offsetHeight;
// offsetHeight にアクセスするとリフロー操作がトリガーされます

// 推奨事項:
const height = element.offsetHeight;
// 計算の繰り返しを避けるためにレイアウト情報をキャッシュする

4. #DocumentFragment を使用する
   作成時に JavaScript を動的に使用する多数の DOM 要素がある場合は、DocumentFragment を使用してリフローおよび再描画操作を減らすことができます。 DocumentFragment は、オフラインで操作でき、最終的にドキュメントに挿入される軽量のドキュメント フラグメントで、ブラウザーのレンダリングの負担を軽減します。

// 例: DocumentFragment の使用
// 推奨されません:
for (let i = 0; i const element = document.createElement ('div');
document.body.appendChild(element);
}
// 要素が挿入されるたびに、リフローと再描画がトリガーされます

// 推奨:
const フラグメント = document.createDocumentFragment();
for (let i = 0; i const 要素 = document.createElement('div');
フラグメント。 appendChild( element);
}
document.body.appendChild(fragment);
// すべての要素を一度に挿入し、リフローと再描画を 1 回だけトリガーします

サマリー
減らすことでリフローおよび再描画操作により、Web ページのパフォーマンスが大幅に向上し、ユーザー エクスペリエンスが向上します。この記事では、リフロー操作と再描画操作を減らすいくつかの方法について説明し、具体的なコード例を示します。これらの方法が Web ページのパフォーマンスの最適化に役立つことを願っています。すべての操作でリフローや再描画が発生するかどうかを考慮してください。コードを最適化し、不要な操作を減らすことで、Web ページがよりスムーズかつ高速になります。

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