ページのパフォーマンスの最適化: 再描画とリフローによって引き起こされるページの読み込み速度の低下の問題を解決します。

ページの読み込み速度の向上: ページの再描画とリフローによって引き起こされるパフォーマンスのボトルネックを解決するには、特定のコード サンプルが必要です

インターネットの発展に伴い、ユーザーはますますWeb ページの読み込み速度が気になる 要件はますます高くなっています。ページの読み込み速度はWebサイトのユーザーエクスペリエンスや評価に直結するため、開発者にとってページ読み込み速度の向上は非常に重要な課題です。ページの再描画とリフローは、ページの読み込みが遅くなる主な原因の 1 つです。この記事では、ページの再描画とリフローの理由と、コードの最適化によってそれらによって引き起こされるパフォーマンスのボトルネックを軽減する方法について詳しく説明します。

まず、ページの再描画とリフローの概念を理解する必要があります。

ページの再描画とは、ページ内の要素のスタイルを変更する必要があるときに、ブラウザーがこれらの要素を再描画することを意味します。ページのリフローとは、ページ上の要素の位置、サイズ、コンテンツなどが変更されると、ブラウザーが要素の位置とサイズを再計算してから、これらの要素を再描画する必要があることを意味します。

ページの再描画とリフローでは、ブラウザでページを再レンダリングする必要があり、このプロセスは非常にパフォーマンスを消費します。したがって、コードを最適化してページの再描画とリフローの数を減らし、それによってページの読み込み速度を向上させる必要があります。

次に、一般的な最適化のヒントをいくつか示します。

1. DOM に対する操作を減らす

ページのサイズ、位置を変更したり、アニメーションをトリガーしたりすると、ページのリフローが発生します。したがって、DOM 上の操作を減らし、複数の操作を 1 つにマージするように努める必要があります。

たとえば、要素の幅と高さを変更する必要がある場合、最初に要素を非表示にし、次にサイズを変更して、最後に表示することができます。

// Bad
element.style.width = '100px';
element.style.height = '100px';

// Good
element.style.display = 'none';
element.style.width = '100px';
element.style.height = '100px';
element.style.display = 'block';

2. スタイル属性への頻繁なアクセスを避ける

スタイル属性への頻繁なアクセスもページ リフローの原因となります。したがって、JavaScript で style 属性に頻繁にアクセスすることは避ける必要があります。

// Bad
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = '100px';
  elements[i].style.height = '100px';
}

// Good
const width = '100px';
const height = '100px';
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = width;
  elements[i].style.height = height;
}

3. ドキュメント フラグメントの使用

複数の DOM 要素を動的に作成する必要がある場合、ドキュメント フラグメントを使用してパフォーマンスを向上させることができます。ドキュメント フラグメントは、複数の DOM 要素を追加してドキュメントに一度に挿入できる軽量のコンテナです。

// Bad
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  document.body.appendChild(element);
}

// Good
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

4. アニメーション効果を使用する場合は、transform を使用して上/左を置き換えます

アニメーション効果を使用する場合は、ページのリフローを避けるために、transform を使用して上/左およびその他の属性を置き換えます。

.element {
  transform: translate(100px, 100px);
}

/* Bad */
.element {
  top: 100px;
  left: 100px;
}

/* Good */
.element {
  transform: translate(100px, 100px);
}

上記の最適化手法により、ページの再描画とリフローの数を減らすことができ、それによってページの読み込み速度が向上します。もちろん、他にも多くの最適化手法があり、プロジェクトごとに最適化手法が異なりますが、開発者は実際の状況に応じて適切な最適化手法を選択できます。

要約すると、DOM での操作を減らし、スタイル属性への頻繁なアクセスを避け、ドキュメントのフラグメントを使用し、top/left やその他の属性の代わりに変換を使用することで、ページの再描画の回数を大幅に減らすことができます。リフローにより、ページの読み込み速度が向上します。同時に、ページの読み込み速度の最適化もユーザー エクスペリエンスを向上させる重要な手段であるため、開発者はこれに注意を払い、開発プロセス中にパフォーマンスの最適化に重点を置く必要があります。

以上がページのパフォーマンスの最適化: 再描画とリフローによって引き起こされるページの読み込み速度の低下の問題を解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。