フロントエンドのパフォーマンス最適化についての深い理解: ネットワークからレンダリングまで

1. ネットワークの最適化

HTTPリクエストを減らす

• リソースのマージ: CSS ファイルと JavaScript ファイルをマージすることでリクエストの数を減らします。

• インライン リソース: 小規模な CSS および JavaScript の場合は、HTML に直接インライン化します。

HTTP/2を使用する

• HTTP/2 は多重化をサポートし、リクエストのブロックを減らし、読み込み速度を向上させます。

GZIP圧縮を有効にする

サーバー側の構成、テキスト リソースの圧縮、送信量の削減。

キャッシュ戦略

Cache-Control などの HTTP キャッシュ ヘッダーを使用して、適切なキャッシュ戦略を設定します。

2. リソース読み込みの最適化

遅延読み込み

画像やビデオなどに適した、ビューポートに入る直前のリソースのみを読み込みます。

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="フロントエンドのパフォーマンス最適化についての深い理解: ネットワークからレンダリングまで" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

強制的な同期レイアウトを避ける

• 複雑な JavaScript アニメーションの代わりに requestAnimationFrame または CSS アニメーションを使用して、リフローと再描画を減らします。

画像の最適化

• 適切な画像形式 (WebP など) を選択し、適切なサイズと解像度を使用します。

4. Service Worker とオフライン ストレージ

• Service Worker を使用して、オフライン キャッシュとリソースの更新を実装します。

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

5. パフォーマンスの監視と分析

• パフォーマンスのテストと分析には、Lighthouse、WebPageTest、Chrome DevTools などのツールを使用します。

6. コード分割と遅延読み込み

動的インポート

動的インポート (import() 式) を使用してコード ブロックをオンデマンドで読み込み、初期読み込み時間を短縮します。

button.onclick = async () => {
    const module = await import('./lazyModule.js');
    module.default();
};

ルートレベルのコード分割

SPA アプリケーションでは、Vue Router の遅延読み込みなど、フレームワークによって提供されるルートレベルのコード分割機能を使用します。

// Vue Router example
const Foo = () => import('./Foo.vue');

const routes = [
{ path: '/foo', component: Foo },
];

7. 画像の最適化

レスポンシブ画像

を使用します。要素または srcset 属性を使用して、デバイスのピクセル比またはビューポート サイズに基づいてさまざまな解像度の画像を提供します。

<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="/static/imghw/default1.png" data-src="img/fallback.jpg" class="lazy" alt="フロントエンドのパフォーマンス最適化についての深い理解: ネットワークからレンダリングまで">
</source></source></picture>

8. ウェブワーカー

時間のかかるコンピューティング タスクを Web ワーカーに移動して、メイン スレッドのブロックを回避し、UI の応答性を維持します。

// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);

// worker.js
self.onmessage = function(e) {
    const result = e.data[0] * e.data[1];
    self.postMessage(result);
};

9. メモリリークを避ける

メモリ リークを防ぐために、未使用のタイマー、イベント リスナー、大規模なデータ構造を定期的にクリーンアップします。

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="フロントエンドのパフォーマンス最適化についての深い理解: ネットワークからレンダリングまで" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

10. ウェブバイタルモニタリング

ユーザー エクスペリエンスを測定するための重要な指標である、LCP (最大コンテンツ ペイント)、FID (最初の入力遅延)、CLS (累積レイアウト シフト) などの Web Vitals メトリクスに焦点を当てます。

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

以上がフロントエンドのパフォーマンス最適化についての深い理解: ネットワークからレンダリングまでの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。