フロントエンド最適化の概要

リソースの統合

// 未合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

// 合并之后，可以减少请求
<script src="abc.js"></script>

キャッシュ

• 静的リソースにハッシュサフィックスを追加し、ファイルの内容に基づいてハッシュを計算します
• ファイルの内容は変更されず、ハッシュも変更されず、URLも変更されません。
• URLとファイルが変更されていない場合、httpキャッシュメカニズムが自動的にトリガーされ、304が返されます

CDNを使用する

例：https://www.bootcdn.cn/

SSRサービスレンダリング（サーバー側レンダリング）

• サーバー側のレンダリング：Webページとデータを一緒にロードし、一緒にレンダリングします
• 非SSR（フロントエンドとバックエンドの分離）：最初にWebページをロードし、次にデータをロードしてから、データをレンダリングします

画像の遅延読み込み

DOMクエリをキャッシュする

複数のDOM操作が一緒にDOM構造に挿入されます

できるだけ早くJSの実行を開始します