先端性能最適化のまとめ

記録性能の最適化に関する知識.
Chrome DevTools-NetworkDOMContentLoaded： DOMツリーの構築が完了した時間Load: ページのロードが完了しました.すなわち、DOMツリーの構築が完了した後、ピクチャなどの外部リソースをロードし終えた時間Finish:は、ページ上のすべてのHTTP要求が応答完了に送信される時間である.
Waterfall
HTTP要求の異なる段階によるソートStart Time：が開始を要求した時間Response Time：リソースのダウンロード開始時間End Time：が、終了を要求した時間Total Duration：は、全プロセスの時間Latency全体を要求する. 応答待ち時間を要求します.
下図のようにWaterfall右ボタンの後にTotal Durationを選択すると、全体の継続時間に従って並べ替えてください.色は異なるリソースファイルを表しています.明るい色の部分はリソースの待ち時間を表しています.暗い部分はダウンロード時間を表しています.
ローディング
一、どうして怠惰でロードしますか?
二、怠惰な負荷の実現原理

は、まず、srcではなく、ピクチャのアドレスを他の属性(data-url)に置く.

ページのロード時に、scrollTopの値から画像が視認領域にあるかどうかを判断し、視認領域であれば、data-url属性の値をsrc属性に取り出して保存する(先頭画面の画像は直接読み込むことができる).

は、スクロール中に、画像が視認領域にあるかどうかを判定し、ある場合には、data-url属性の値をsrc属性に置く.

画像の最適化
画像の最適化のいくつかの方法:
CSS SpriteとBASE 64の対比
各タイプの画像の比較
遅延荷重第三者JS

defer ：がDOMをレンダリングするプロセスは、JSスクリプトローディングのプロセスと非同期的に進行されるだろう. JSスクリプトの実行は、すべての要素の解析が完了した後(外部スクリプトファイルにのみ適用されます)

で行われます.

async ：によって、DOMをロードし、レンダリングするプロセスが、および JSスクリプトのロードと実行のプロセスは非同期的に行われる(外部スクリプトファイルにのみ適用される)

.

deferはローディング順にスクリプトファイルを実行します.asyncは声明の順序で

を実行しません.
具体的な違いは下図の通りです.
緑色の線はHTML解析を表します.青い線はJSスクリプトの読み込み時間を表します.赤い線はJSスクリプトの実行時間を表します.
PrloadとPrefetch
preloadは指定されたリソースをブラウザに事前にローディングさせ(ローディング後は実行されません)、実行が必要な時に実行します.

ロードと実行を分離し、レンダリングとdocumentのオンラインイベントをブロックしない

指定リソースを事前にロードする

使用:
prefetch:ブラウザが将来使用する可能性があるリソースを教えてくれます.ブラウザは暇な時に対応するリソースをロードします.
使用:
Gzip->Brotil
Brotli圧縮アルゴリズムは複数の特徴を持ち、最も典型的なものは以下の3つである.

一般的なWebリソースコンテンツに対して、Brotliの性能はGzipに比べて17-25%向上した.

Brotli圧縮レベルが1の場合、圧縮率はGzip圧縮レベルより9(最高)の場合も高い.

は、異なるHTML文書を処理する際に、Brotliは依然として非常に高い圧縮率を提供することができる.

DNS事前解析
デフォルトでは、ブラウザはページと現在のドメイン名が同じドメインではないドメイン名をプリフェッチし、キャッシュします.これは陰的なDNS Prfetchです.ページに出現していないドメインをプリフェッチしたい場合は、表示されているDNS Prfetchを使用します.DNS は、ブラウザが、ユーザがリンクにアクセスする前にドメイン名を解析しようとするもので、1つのページに複数のドメイン名のリンクがある場合、DNS は、ユーザがリンクをクリックする前に、最も少ないCPUとネットワークを使用して、バックグラウンドで解析を行う.事前に解析したドメイン名をクリックすると、平均的に200 msの待ち時間を短縮し、ユーザー体験を向上させることができる.

参考文献:
https://segmentfault.com/a/11...DNS事前解析:https://www.cnblogs.com/golov...