詳細なパフォーマンスウェブ性能パラメータ

この記事のポイント：

1. はじめコアは、ブラウザのワークフロー。
2. パフォーマンスオブジェクトとメソッドを紹介します。消費するとメモリ使用量の性能目標（、TCP接続時間など、個々のリソースのDNS解決時間まで）によって、リソースのウェブを詳細。

ブラウザのコア作業

次のように入力からURLのページに提示し、ブラウザのコアが動作します。

時間内に該当するポイントをチャート上。
ステップ1開始時刻
のstartTime：録画開始時間。

ステップ2リダイレクト
redirectStart：リダイレクトが開始時間。
redirectEnd：リダイレクトの終了時間。

ステップ3ブラウザとサーバ接続
fetchStart：ブラウザがHTTPリクエストの時間を送信します。
domainLookupStart：DNSクエリの開始時刻。
domainLookupEnd：DNSクエリの終了時間。
connectStart：TCPコネクションの開始時刻。
connectEnd：TCPコネクションの終了時間。

ステップ4ブラウザとサーバのデータ交換
requestStartを：ブラウザ開始時刻のデータがサーバーに送信されます。
responseStart：タイムサーバーがブラウザにデータの送信を開始します。
responseEnd：ブラウザにサーバー側にデータを送信するための時間。
requestStart：ブラウザの開始時刻のデータがサーバーに送信されます。

ステップ5ブラウザDOM解析
domLoading：時間のDOM解析始まり。
domInteractive：DOM構文解析が完了すると、ロード時間埋め込みリソースを起動します。
domContentLoadedEventStart：スクリプトを実行する必要があるが、時間が解決されました。
domContentLoadedEventEnd：スクリプトは、即時実行が行われている必要があります。
domComplete：時間内に完成した文書解析。

性能目標

Googleが任意のWebブラウザを開き、デバッグモード（ショートカットF12）を入力します。Google Chromeのコンソールオプションでの入力の性能を入力し、あなたはパラメータの数を見ることができます。

オブジェクト	プロパティ	説明
timeOrigin	ノー	のパフォーマンス測定開始タイムスタンプ
onresourcetimingbufferfull	ノー	ブラウザのキャッシュコールバックより
メモリ	totalJSHeapSize	利用可能な総メモリサイズJS
-	usedJSHeapSize	使用するメモリサイズJS
-	jsHeapSizeLimit	JSメモリサイズの制限
ナビゲーション	タイプ	ページに移動するようにして、リンクまたはフォームの提出に0をクリックし、1ページの更新またはリロード（）メソッドを示し、2前後履歴レコードを表し;または255は、任意の他の方法を表します。
-	redirectCount	ページのリダイレクトに到達する前に
タイミング	navigationStart	以前の文書が存在しない場合は、ブラウザのコンテキストが終わり、文書にタイムスタンプをアンロードすると、この値は、同じfetchStartになります。
-	unloadEventStart	unloadイベントが以前の文書が存在しない場合、この値は0で、スローされるタイムスタンプ。
-	unloadEventEnd	以前の文書が存在しない場合は、アンロードイベント処理のタイムスタンプは、完了し、この値は0です。
-	redirectStart	HTTPリダイレクト、リダイレクトかの開始のタイムスタンプが異なるソースをリダイレクトするために、この値は0です。
-	redirectEnd	最后一个HTTP重定向开始时的时间戳，没有重定向或者重定向中的不同源，这个值会是0。
–	fetchStart	浏览器准备好使用HTTP请求来获取文档的时间戳。发送在检查缓存之前。
–	domainLookupStart	域名查询开始的时间戳，如果使用了持续连接或者缓存，则与 fetchStart 一致。
–	domainLookupEnd	域名查询结束的时间戳，如果使用了持续连接或者缓存，则与 fetchStart 一致。
–	connectStart	HTTP 请求开始向服务器发送时的时间戳，如果使用了持续连接，则与 fetchStart 一致。
–	connectEnd	浏览器与服务器之间连接建立（所有握手和认证过程全部结束）的时间戳，如果使用了持续连接，则与 fetchStart 一致。
–	secureConnectionStart	浏览器与服务器开始安全链接握手时的时间戳，如果当前网页不需要安全连接，这个值会是 0。
–	requestStart	浏览器向服务器发出HTTP请求的时间戳。
–	responseStart	浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
–	responseEnd	浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。
–	domLoading	当前网页DOM结构开始解析时的时间戳。
–	domInteractive	当前网页DOM结构解析完成，开始加载内嵌资源时的时间戳。
–	domContentLoadedEventStart	需要被执行的脚本已经被解析的时间戳。
–	domContentLoadedEventEnd	需要立即执行的脚本已经被执行的时间戳。
–	domComplete	当前文档解析完成的时间戳。
–	loadEventStart	load事件被发送时的时间戳，如果这个事件还未被发送，它的值将会是0。
–	loadEventEnd	load事件结束时的时间戳，如果这个事件还未被发送，它的值将会是0。

例としては、以下のとおりである：
domComplete - navigationStart =倍ロード時間を。

パフォーマンス・メソッド

1. performance.getEntries（）
   すべての特定のリソース消費時間を確認します。
   
   リソースプロパティの期間の下には、必要な合計時間です。そして、ネットワーク・オプションのタイミングは、ほとんどの時間です。

2. performance.getEntriesByType（タイプの）
   performance.getEntries（）メソッドは、すべての消費リソースを照会することができるだけでなく、リソースを消費リソースタイプの特定の種類に応じて表示することができます。
   その他の1以上に拡張プロパティは、「リソース」にentryTypeプロパティを持っていました。使用可能なperformance.getEntriesByType("resource")すべての静的リソースを照会します。
   
3. performance.getEntriesByName（名前、タイプ）
   より拡大プロパティ1に比べて、name属性が「https://g.csdnimg.cn/tingyun/1.8.3/blog-m.js」です。したがって、メソッドの実装ではperformance.getEntriesByName("https://g.csdnimg.cn/tingyun/1.8.3/blog-m.js","resource")、クエリの静的リソースを消費することにより、指定されました。