フロントエンドのパフォーマンスの最適化

9199 ワード
テキストリンク
誰でもWebサイトを作成できます.ただし、Webサイトの最適化と効率的な作成は、開発者のみが行います.では、フロントエンドのパフォーマンスを最適化するために、開発者は何をすべきでしょうか.
まず、フロントエンドのパフォーマンスは、ロードとレンダリングの2つに分類されます.

この文書では、読み込みとレンダリングの間、読み込みについてのみ説明します.

ロード(ブラウザベース)


Navigation Timingを使用してブラウザのロード性能を測定します.

前の緑の部分はフロントエンドが関与していません.だから後の部分だけ考えておけばいいもう少し拡大して

処理およびLoadプロセスにおいて、処理が終了すると、DOMContentLoadedイベントがLoad終了時にLoadイベントを発生することが分かる.
DOMContentLoadedイベント
-HTMLとCSSパケットの終了時
-レンダーツリーを構成する準備ができています(DOMとCSSOMの構成が完了しました).
loadイベント
-HTMLに必要なすべてのリソースがロードされた時点
フロントエンドのパフォーマンスを最適化する目的は、処理時間とLoad時間を短縮し、DOMContent LoadイベントとLoadイベントを迅速に開始することです.

ブロックリソース処理の最適化


ブラウザ・ロードの初期段階では、HTMLがパケット化されると、CSSまたはJavaScriptがパケット化を中断する可能性があります.このようなスライス割込みは、HTMLスライスがスライスされたことを示し、スライス状態をもたらすリソースをブロックリソース(Block Resource)と呼ぶ.ブロックリソースは、ブラウザのロード中にペイントプロセスを遅らせるため、ブロックリソースがHTMLパケットをブロックしないことを確認する必要があります.Googleによると、キーレンダリングパスを最適化することで、塗装速度を速め、ロード速度を速めることができるという.
CSS最適化
レンダーツリーの設定にはDOMツリーとCSSOMツリーが必要です.DOMツリーは、分類中にタグが発見されたときに順番に構成できますが、CSOMツリーはすべてのCSSを解析しなければ構成できません.つまり、CSSOMツリーが構成されていない場合は、レンダーツリーを作成してレンダーをブロックすることはできません.したがって、CSSは「レンダリング禁止」リソースと呼ばれ、レンダリングをブロックしないようにHTMLドキュメントの上部(<head>より下)に常に配置されます.
<head>
  <link href="style.css" rel="stylesheet" />
</head>
また、外部スタイルシートを並列にダウンロードできないため、インラインスタイルを使用します.
<head>
  <style type="text/css">
    .wrapper {
      background-color: red;   
    }
  </style>
</head>
JavaScriptの最適化
JavaScriptは、DOMツリーとCSSOMツリーを動的に変更してHTMLパケットをブロックするブロックリソースです.<script>タグに遭遇すると、スクリプトが実行され、以前に作成したDOMにのみアクセスできます.スクリプトの実行が完了するまで、DOMツリーの作成は停止します.外部からインポートされたJavaScriptでは、すべてのスクリプトがダウンロードされて実行されるまでDOMツリーの作成が停止します.このため、JavaScriptは、HTMLドキュメントの一番下(前)にある「レンダリング禁止」リソースとも呼ばれます.
<body>
  <div>...</div>
  <div>...</div>
  <script src="app.js" type="text/javascript"></script>
</body>
またはasync、deferのオプションです.
<html>
  <head>
    <script async src="https://google.com/analatics.js" type="text/javascript"></script>
  </head>
  <body>
    <div>...</div>
    <div>...</div>
  </body>
</html>
しかし,開発パターンの変更に伴い,DOMContent LoadやLoadイベントが発生した場合のみ性能を判断することは困難である.最近多く使用されている単一ページアプリケーションでは、Webページに含まれるHTMLの数が少なく、DOMContent LoadおよびLoadイベントが早期に発生する可能性がありますが、イベント発生後もスクリプトの実行が遅い場合が多いです.従って,ユーザベースの新しい性能測定法が必要である.

ユーザー基準の最適化


ユーザベースのパフォーマンス測定は、ユーザにコンテンツを表示する複数の時点に基づいている.有意義なコンテンツを初めて見ると、パフォーマンスが向上するため、事前に最適化する必要があります.
次の図は、Googleの主なレンダリングパスを示しています.

その中で最も重要なのは最初のMeaningful Paintです.FMPはユーザが有意義なコンテンツを描き始める最初の瞬間である.CSS、JavaScriptのロードが開始され、スタイルが適用されてプライマリコンテンツが読み込まれ、コンテンツを公開できます.
プライマリレンダーパスは、サーバ側レンダーやレンダラーなどのツールを使用して適用できます.

参考資料

  • https://www.youtube.com/watch?v=G1IWq2blu8c
  • https://ui.toast.com/fe-guide/ko_PERFORMANCE
    • 金額の変換——アラビア数字の金額は中国の伝統的な形式に変換します
    DFSとBFS