Web ページの読み込み速度のベスト プラクティス: リフロー、再描画、リフローの最適化

Web ページの読み込み速度の向上: リフロー、再描画、リフローのベスト プラクティス、特定のコード サンプルが必要です

インターネットの急速な発展に伴い、Web ページの読み込み速度が向上しています。それはユーザーエクスペリエンスの重要な部分となっています。長い読み込み時間は誰も待ちたくないので、Web ページの読み込み速度を向上させる方法は非常に重要な問題となっています。

Web ページの読み込み速度は多くの要因の影響を受けますが、その中で、リフロー、再描画、リフローが 3 つの主なパフォーマンスのボトルネックです。この記事では、Web ページの読み込み速度を最適化するためのベスト プラクティスをいくつか紹介し、具体的なコード例を示します。

1. HTML および CSS 構造の最適化

Web ページの HTML および CSS 構造は、Web ページの読み込みパフォーマンスの基礎です。次の最適化オプションを検討してください。

• HTML および CSS ファイルのサイズを最小限に抑えます。不要なコード、スペース、コメントを削除し、圧縮ツールを使用してファイル サイズを削減します。
• ネスト レベルを減らす: ネスト レベルが多すぎると、ブラウザでリフロー操作と再描画操作が繰り返し実行されるため、HTML と CSS の構造をできるだけフラットに保つようにしてください。
• 外部 CSS ファイルを使用する: スタイルのインライン化や重複を避けるために、CSS スタイルを外部ファイルに配置します。

2. リフローと再描画のトリガーを避ける

リフローと再描画は、Web ページのパフォーマンスに影響を与える 2 つの重要な要素です。これらは通常、DOM 要素への変更によってトリガーされ、ユーザー操作やアニメーション効果中に発生することがよくあります。リフローと再ペイントのトリガーを回避する方法は次のとおりです。

• style 属性の代わりにクラスを使用する: style 属性を使用して HTML 要素にスタイルを直接記述するのではなく、スタイルを CSS クラスとして定義します。これにより、スタイルへの変更が減り、再描画やリフローの発生が減ります。
• 頻繁な DOM 操作を避ける: DOM 要素に対する頻繁な追加、削除、変更操作を減らし、複数のタスクを 1 回の操作で完了するようにしてください。
• ドキュメント フラグメントまたはオフライン DOM を使用する: 頻繁な操作が必要な DOM 要素をドキュメント フラグメントまたはオフライン DOM に一時的に保存し、操作の完了後にページに追加して、リフローや再描画の回数を減らします。
• JavaScript アニメーションの代わりに CSS アニメーションを使用する: CSS アニメーションはブラウザーのハードウェア アクセラレーションを直接利用でき、JavaScript を使用して実装されたアニメーションよりも効率的です。

以下は、頻繁な DOM 操作を回避するためのサンプル コードです。

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const fragment = document.createDocumentFragment();

  for (let i = 0; i < 1000; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = 'List item ' + i;
    fragment.appendChild(listItem);
  }

  container.appendChild(fragment);
</script>

3. コンテンツのプリロードと遅延ロード

プリロードと遅延ロードWeb ページの読み込み速度を最適化する効果的な方法です。プリロードを使用すると、ページがレンダリングされる前に事前に必要なリソースをロードできます。一方、遅延ロードでは、特定の条件が満たされたときに特定のコンテンツをロードできます。

以下は、画像のプリロードおよび遅延読み込みのサンプル コードです:

<img src="/static/imghwm/default1.png"  data-src="loading.gif"  class="lazy" data- alt="Image">

<script>
  const img = document.querySelector('img');
  const src = img.getAttribute('data-src');

  const image = new Image();
  image.onload = function() {
    img.setAttribute('src', src);
  };
  image.src = src;
</script>

上記のコードでは、プリロードされた画像は最初に読み込みアニメーションとして表示され、画像リソースが読み込まれた後に表示されます。 、実際の画像に置き換えます。

4. リソース ファイルのマージと圧縮

リソース ファイルのマージと圧縮により、ネットワーク リクエストの数とファイル サイズを削減できます。複数の CSS ファイルまたは JavaScript ファイルを 1 つのファイルに結合し、圧縮ツールを使用してファイル サイズを削減します。これにより、サーバーとブラウザ間の往復回数が減り、ファイル転送時間が短縮されます。

5. ブラウザ キャッシュを使用する

サーバー上でキャッシュ ポリシーを設定し、以降の読み込み時にリクエストを再送信する代わりにキャッシュからページを取得できるようにします。適切なキャッシュ ヘッダー情報を設定することにより、ブラウザーは静的リソースを一定期間キャッシュできるため、サーバーの負荷が軽減され、ページの読み込み速度が向上します。

以下は、Apache サーバーにキャッシュを設定するためのサンプル コードです。

<IfModule mod_expires.c>
  ExpiresActive on
  
  ExpiresDefault "access plus 2 weeks"
  
  <FilesMatch ".(png|jpg|jpeg|gif|ico|css|js)$">
    ExpiresDefault "access plus 1 month"
  </FilesMatch>
</IfModule>

この記事では、HTML および CSS 構造の最適化や、キャッシュの回避など、Web ページの読み込み速度を向上させるためのいくつかのベスト プラクティスを紹介します。リフローと再描画のトリガー、コンテンツのプリロードと遅延ロード、リソース ファイルのマージと圧縮、ブラウザ キャッシュの使用など。これらのテクノロジーが Web ページの読み込み速度を向上させ、より良いユーザー エクスペリエンスを提供するのに役立つことを願っています。

以上がWeb ページの読み込み速度のベスト プラクティス: リフロー、再描画、リフローの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。