フロントエンド ページの読み込みが遅い理由とパフォーマンスの最適化の問題

1. ページの読み込みが遅い原因

Web ページを開いてページの読み込みが遅い場合は、次のような原因が考えられます。
(1) http リクエストが多すぎる
(2) JS スレッドが長時間占有されている
(3) ページのリフローと再描画が多い
(4) リソース読み込みのブロック
(5) メモリ リークにより過剰なメモリが発生する
(6) Dom ノードまたはイベントが大量のメモリを占有する
(7) JS スレッドを長時間占有する (
8) リソースの読み込みがブロックされる
(9) ページのリフローと再描画が増加する

2. フロントエンドのパフォーマンス最適化手法

最適化原則:
(1) http リクエストを減らす (画像にスプライト、Base64、フォント アイコンなどを使用する、リダイレクトを減らす、キャッシュを使用する、css@import を使用しない、空の src と href の使用を避ける) (2) リソースの圧縮とマージ
(HTML 圧縮、CSS 圧縮、JS 圧縮と混乱、ファイルのマージなどを含む)
(3) ネットワーク接続の最適化 (CDN、DNS 事前分析の使用、永続的な接続を確立するためのキープアライブまたは永続的な使用)
(4) 最適化リソースのロード、コードの逆アセンブリ 分割、オンデマンドでロード、レンダリング時の CSS のブロックを減らす、できるだけ早く CSS をロード、ロードのサイズを減らす (5) 再描画のリフローを減らす (6) Webpack のパフォーマンスの最適化 (パッケージのパブリック コード、動的
インポート
)
(7) iframe の使用を減らす
(8) テーブル レイアウトを避ける(
9) CSS や JS に外部リンクを使用するようにする
(10) 新しいコードの追加を避けるインスタンス化後の属性
(11) 読み取りを回避する 配列の長さを超えると
(12) 要素の型変換を回避する

---

元の参考リンク:フロントエンドのパフォーマンスを最適化する 7 つの方法