ホームページ > 記事 > ウェブフロントエンド > HMTL5 API を使用してフロントエンドのパフォーマンスを監視する
HMTL5 API を使用してフロントエンドのパフォーマンスを監視する
- 黄舟オリジナル
- 2018-05-19 14:31:372425ブラウズ
User Timing API は、Web アプリケーション内の 2 つの事前定義されたマーカー間のパフォーマンスを測定できます。開発者は、測定の開始マーカーと終了マーカーを個別に定義するだけで済みます。タイミング位置は、JavaScript オブジェクト「」によって提供される関数を通じてマークできます。
var measuring_start = performance.now();
「」関数を使用すると、Webアプリケーションのタイムアウトを取得できます。この関数と似ているのが Date オブジェクトで、現在のタイムスタンプを取得することもできます。 2 つの主な違いは時間の精度です。now 関数の戻り値に関する w3c ドキュメントでは、小数点以下の 1000 分の 1 まで正確にミリ秒の値を表現できる必要があることが明確に要求されています。また、now関数が返す値はブラウザの「ナビゲーション開始イベント(navigationStart)」から現在までのミリ秒数です。
performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478
画像の読み込みパフォーマンスを分析したい場合は、画像の読み込みイベントに 2 番目のタグを設定できます。画像のロードにかかる時間は、2 つの変数「measure_start」と「measure_end」の差 (ミリ秒単位) です。
<html>
<head>
<meta charset="utf-8" />
<title>test timing</title>
</head>
<body>
<img src="http://cdn3.infoqstatic.com/statics_s2_20150922 -0305u1/styles/i/logo_bigger.jpg" alt="image" >
<script type="text/javascript">
var measure_start = performance.now();
document.getElementsByTagName("img")[0].addEventListener ("load", function() {
var measure_end = performance.now();
console.log("image load time: " + (measure_end - measure_start) + "ms");
}, false);
</script>
</body>
</html>この HTML にアクセスすると、コンソールに出力が表示されます:
image load time: 24.395ms
同時に、Chrome デベロッパー ツールのネットワーク タブの読み込み時間と比較できます:
(クリックすると画像が拡大します) )
now 関数を直接使用することに加えて、タイムスタンプの取得に加えて、パフォーマンス インターフェイスも関数を提供します。開発者は、時間を記録する必要がある場所にマーカーを作成したり消去したりできます。
performance.mark("start"); … performance.mark("end");マーク関数は値を返しませんが、マークされたデータはマークの名前を通じて後で取得できます。マーカー間の差を計算したい場合は、「measure」関数を使用して実行できます。この関数には 3 つのパラメータが必要です。最初のパラメータは差分の名前を定義し、2 番目と 3 番目の変数はマーカーの名前を指定します。同様に、この関数は値を返しません。
performance.measure("difference", "start", "end");上記の例では、2 つのタグ「start」と「end」の差を計算し、その差を「difference」と名付けます。ここで同じ名前が記録され、上書きされないことに注意することが重要です。
前述したように、mark と meter の 2 つの関数は値を返しません。マーカーまたは測定値の内容を読み取りたい場合は、パフォーマンス インターフェイスで「getEntries」、「getEntriesByType」、または「getEntriesByName」を呼び出して読み取る必要があります。このうち、「getEntries」関数は、現在のパフォーマンス オブジェクトに保存されているすべてのタグ (Web ページによって読み込まれたリソースを含む) と測定結果を返します。「getEntriesByType」関数は、対応するタグ (または測定結果) を取得します。名前のデータ。これらの関数の戻り値は、名前、開始時刻、消費時間などのフィールドを含むリストです。
たとえば、すべてのマーカーまたは測定結果を取得したい場合は、「getEntriesByType」関数を通じて取得できます:
performance.mark("start");
performance.mark("end");
performance.measure("difference", "start", "end");
var marks = performance.getEntriesByType("mark");
var measures = performance.getEntriesByType("measure");
console.log("===marks===:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })
console.log("===measures===:") measures.forEach(function(measure){
console.log(measure.name + ": " + measure.duration) })ブラウザ (Chrome) コンソールでの実行後の出力は次のとおりです:
===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646
返されたオブジェクトの name フィールドは、設定されたマーク (測定結果) の名前です。マークについては、startTime を通じてマーク時間を取得できます (上記の now 関数と同様、ここで返される時間も相対的なものです)。 NavigationStart イベント) の計算結果については、計算結果を取得するフィールドを使用できます。上記の例で使用されている「mark」タイプと「measure」タイプに加えて、ブラウザ (Chrome、Firefox など) はすでに「resource」タイプをサポートしています。言い換えれば、これらのブラウザはデフォルトで、すべての外部リソースのロードにかかる時間を測定するのに役立ちます。前の例の HTML (画像への参照を含む) の場合、ブラウザ コンソールで次の JS コードを実行すると、画像の読み込みにかかる時間を直接確認できます:
performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })上記のコードの出力(Chrome) は次のとおりです:
http://cdn3.infoqstatic.com/statics_s2_20150922- 0305u1/styles/i/logo_bigger.jpg: 21.696999901905656
このデータは、Chrome デベロッパー ツールの [ネットワーク] タブに記録されたこのリクエストにかかった時間とまったく同じです。
マーカーや測定結果名から直接データを取得したい場合は、getEntriesByName関数で取得できます。この関数は PerformanceEntry オブジェクトの配列も返すため、特定のデータを取得するには反復する必要があることに注意してください。
同様に、パフォーマンスインターフェースにもマークを削除するためのインターフェースが用意されています。以前に作成したマークと測定結果は、clearMarks 関数と clearMeasures 関数を使用して削除できます。どちらの関数もオプションの名前パラメータを受け取ります。名前が渡されると、指定された名前のデータが削除され、そうでない場合はマーク/測定結果がクリアされます。
performance.clearMarks();
performance.mark("start");
performance.mark("end");
var marks = performance.getEntriesByType("mark");
console.log("before clear:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })
performance.clearMarks("start");
marks = performance.getEntriesByType("mark");
console.log("after clear:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })上記のコードを実行した後の出力は次のとおりです:
before clear: start: 9080690.565000001 end: 9080690.575000001 after clear: end: 9080690.575000001
つまり、performance.clearMarks("start"); を実行すると、「start」マークがクリアされます。
ブラウズ タイミング API
ブラウズ タイミング API は、Web ページの読み込みの開始から完了までのプロセス全体における各ノードのタイムスタンプをカウントします。ユーザー タイミング API とは異なり、ブラウザ タイミング API の時刻は標準のタイムスタンプです。各ノードのタイムスタンプは、performance.timing オブジェクトに保存されます。含まれる各ノードについては、以下の図を参照できます:
(画像をクリックして拡大)
console.log(performance.timing.domLoading); console.log(performance.timing.domComplete);
console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));たとえば、domComplete (DOM 構築が完了) と domComplete (DOM 構築が完了) との差を取得することで、DOM ツリーの構築コストを計算できます。 domLoading（DOM構築開始）時間。
タイミング オブジェクトに保存される各ノードのロード タイムスタンプに加えて、パフォーマンス オブジェクトは および オブジェクトも保存します。現在のページの読み込みタイプとリダイレクト時間を保存します。その中で、読み込みタイプのタイプは次のとおりです:
TYPE_NAVIGATE（type == 0）：通过点击链接、输入地址、表单提交、脚本初开启等方式加载
TYPE_RELOAD（type == 1）：通过重新加载或者location.reload()操作加载
TYPE_BACK_FORWARD（type == 2）：通过浏览器历史遍历操作加载
TYPE_RESERVED（type == 255）：上面没有定义的其他方式
如直接打开一个页面，在控制台中执行：
console.log(performance.navigation.type);
上述脚本执行后，控制台会输出0，表示这是直接打开的一个页面。再次刷新页面，重新执行上面的JavaScript片段，则会输出1，表示这是一次重新加载。
performance.timing.redirectCount 记录了当前页面经历的重定向次数。
浏览器支持
用户计时API已经支持，如IE10+、Chrome 25+、Firefox 15+等，但是Safari等浏览器还不支持。对于浏览计时API，更多的浏览器已经，包括Chrome、Firefox、IE9+、Safari 8+等等。
以上就是使用HMTL5 API监控前端性能的内容，更多相关内容请关注PHP中文网（www.php.cn）！