ホームページ > 記事 > ウェブフロントエンド > Web ページの読み込み速度のベスト プラクティス: リフロー、再描画、リフローの最適化
Web ページの読み込み速度の向上: リフロー、再描画、リフローのベスト プラクティス、特定のコード サンプルが必要です
インターネットの急速な発展に伴い、Web ページの読み込み速度が向上しています。それはユーザーエクスペリエンスの重要な部分となっています。長い読み込み時間は誰も待ちたくないので、Web ページの読み込み速度を向上させる方法は非常に重要な問題となっています。
Web ページの読み込み速度は多くの要因の影響を受けますが、その中で、リフロー、再描画、リフローが 3 つの主なパフォーマンスのボトルネックです。この記事では、Web ページの読み込み速度を最適化するためのベスト プラクティスをいくつか紹介し、具体的なコード例を示します。
Web ページの HTML および CSS 構造は、Web ページの読み込みパフォーマンスの基礎です。次の最適化オプションを検討してください。
リフローと再描画は、Web ページのパフォーマンスに影響を与える 2 つの重要な要素です。これらは通常、DOM 要素への変更によってトリガーされ、ユーザー操作やアニメーション効果中に発生することがよくあります。リフローと再ペイントのトリガーを回避する方法は次のとおりです。
以下は、頻繁な 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>
プリロードと遅延ロードWeb ページの読み込み速度を最適化する効果的な方法です。プリロードを使用すると、ページがレンダリングされる前に事前に必要なリソースをロードできます。一方、遅延ロードでは、特定の条件が満たされたときに特定のコンテンツをロードできます。
以下は、画像のプリロードおよび遅延読み込みのサンプル コードです:
<img src="loading.gif" data-src="image.jpg" 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>
上記のコードでは、プリロードされた画像は最初に読み込みアニメーションとして表示され、画像リソースが読み込まれた後に表示されます。 、実際の画像に置き換えます。
リソース ファイルのマージと圧縮により、ネットワーク リクエストの数とファイル サイズを削減できます。複数の CSS ファイルまたは JavaScript ファイルを 1 つのファイルに結合し、圧縮ツールを使用してファイル サイズを削減します。これにより、サーバーとブラウザ間の往復回数が減り、ファイル転送時間が短縮されます。
サーバー上でキャッシュ ポリシーを設定し、以降の読み込み時にリクエストを再送信する代わりにキャッシュからページを取得できるようにします。適切なキャッシュ ヘッダー情報を設定することにより、ブラウザーは静的リソースを一定期間キャッシュできるため、サーバーの負荷が軽減され、ページの読み込み速度が向上します。
以下は、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 サイトの他の関連記事を参照してください。