H5ページコンテナのロードとリソースファイルのロード：2つの部分を含むH5ページのロードプロセス、。
1、図に示すように、H5ページコンテナのロードプロセスの詳細：パフォーマンスデータの指標の下にブラウザウィンドウに対して。
H5ページコンテナの各キーポイントの消費時間は以下のように計算されます：
- 準備時間 = domainLookupStart - navigationStart;
- リダイレクト時間 = redirectEnd - redirectStart.
- DNS解決までの時間 = domainLookupEnd - domainLookupStart;
- IP接続時間消費 = connectEnd - connectStart;
- 最初のパケットの経過時間 = responseStart - requestStart.
- ネットワークからロード する場合：responseEnd - requestStart、キャッシュからロードする場合：responseEnd - fetchStart、キャッシュからロードする場合：responseEnd - fetchStart。
- dom = domComplete - domLoading;
- ページのホワイトアウト時間 = domLoading - navigationStart.
- Interactable = domContentLoadedEventEnd - navigationStart；
- ページが完全にロードされた時間 = loadEventEnd - navigationStart.
First contentful paint(FCP)：ページの読み込みが開始されてから、ページのコンテンツの一部が画面にレンダリングされるまでの実際の時間。 Largest contentful paint(LCP)：ページの読み込みが開始されてから、最大のテキストブロックまたはイメージ要素が画面にレンダリングされるまでの時間を測定。
ホワイトスクリーン, ファーストスクリーン, インタラクティブ, フルロード.
2、UIWebViewリソースファイルのロードプロセスは以下の通りです：
- 準備時間 = domainLookup - fetchStart
- DNS解決までの時間 = domainLookupEnd - domainLookupStart;
- IP接続時間消費 = connectEnd - connectStart;
- 最初のパケットの経過時間 = responseStart - requestStart.
- ネットワークからロード する場合は、responseEnd - requestStart。キャッシュからロードする場合は、responseEnd - fetchStart。
パフォーマンス・データ指標
n["DNS解決時間"] = e.domainLookupEnd - e.domainLookupStart,
n["TCPハンドシェーク完了時間"] = e.connectEnd - e.connectStart,
n["リダイレクト時間"] = e.redirectEnd - e.redirectStart,
n["htmlttfbの時間を消費する"] = e.responseStart - e.requestStart,
n["HTTPリクエスト・レスポンス完了時間"] = e.responseEnd - e.requestStart,
n["DOM読み込み開始までにかかった時間"] = e.responseEnd - e.navigationStart,
n["DOMロード完了時間"] = e.domComplete - e.domLoading,
n["DOM構造解決の完了時間"] = e.domInteractive - e.domLoading,
n["スクリプトのロード時間"] = e.domContentLoadedEventEnd - e.domContentLoadedEventStart,
n["onloadイベント時間"] = e.loadEventEnd - e.loadEventStart,
n["ページのフルロード時間"] = n["リダイレクト時間"] + n["DNS解決時間"] + n["TCPハンドシェーク完了時間"] + n["HTTPリクエスト・レスポンス完了時間"] + n["DOM構造解決の完了時間"] + n["DOMロード完了時間"]
DNS解決プロセス
- 0、ブラウザのDNSキャッシュ、各ブラウザのDNSキャッシュ時間は固定
- 1.オペレーティングシステムのキャッシュ ①.ローカルのhostsファイル 2.DNSキャッシュサービス DNSClient
- 3.ローカルDNSサーバーは、ドメイン名のレコードを再帰的に検索します。どのようにまだ、ローカルDNSサーバーでルートドメインに繰り返しルックアップするために
- 4.ローカルDNSサーバーの反復クエリー
- ルートドメインを訪問して、トップレベルドメイン.comのサービスとIP(アドレス)を取得
- トップレベルドメインにアクセスし、ネームサーバーとセカンドレベルドメイン.xx.comのアドレスを取得
- セカンドレベルドメイン名を尋ねて、ネームサーバーとサードレベルドメイン名.xx.xxx.comのアドレスを取得します。
- まだ第4レベル、第5レベルがある場合は、実際のIPアドレスが取得され、キャッシュされるまで再帰的な検索を続行します。
ホストとローカルネームサーバー間のクエリーは再帰的です。
DNSサーバーは、サーバー自体に過度の負担がかからないように、互いに繰り返し照会を行います。 === ローカルのDNSサーバーだけが正しい方向に向けられます。
再帰クエリ
反復クエリ
最適化された安定性と信頼性の高いDNSサーバー
< link rel="dns-prefetch" href="//www.xxx.net">
< link rel="dns-prefetch" href="//api.xxx.xxx.net">
tcpネットワークリンクの最適化、処理コストの削減
データ報告：
