フロントエンドモニタデータ収集(perf)

Webとは、たとえあなたと私が一度も会ったことがなくても、趣味が合うことを知っています.家を出ないで、世界の大きさも知っています.
このセクションでは、Webアプリケーションへのユーザーのアクセス速度とパフォーマンスについて説明します.では、これらのデータを取得するにはどうすればいいのでしょうか.私たちのプロジェクトでは、PerformanceTimingインタフェースを使用して、現在のページの時間に関する情報を取得します.Performance Timingは読み取り専用属性Performance.timingは、インタフェースを実装するオブジェクトを取得する.
まず、timing APIの要求全体の各段階の時間情報を提供する図を見てみましょう.
PerformanceTiming.navigationStartは符号なしlong long型のミリ秒数で、同じブラウザコンテキストの前のドキュメントからアンインストール(unload)が終了したときのUNIXタイムスタンプを特徴付けています.前のドキュメントがない場合、この値はPerformanceTimingとなります.fetchStartは同じです.
PerformanceTiming.unloadEventStartは符号なしlong long型のミリ秒数であり、unloadイベントが投げ出されたときのUNIXタイムスタンプを特徴付けている.前のドキュメントがない場合、or if the previous document、or one of the needed redirects、is not of the same origin、この値は0を返します.
PerformanceTiming.unloadEventEndは符号なしlong long型のミリ秒数であり、unloadイベント処理完了時のUNIXタイムスタンプを特徴付けている.前のドキュメントがない場合、or if the previous document、or one of the needed redirects、is not of the same origin、この値は0を返します.
PerformanceTiming.redirectStartは符号なしlong long型のミリ秒数であり、最初のHTTPリダイレクト開始時のUNIXタイムスタンプを特徴付けている.リダイレクトがない場合、またはリダイレクトの異なるソースがある場合、この値は0を返します.
PerformanceTiming.redirectEndは、符号なしlong long型のミリ秒数であり、最後のHTTPリダイレクト完了時(すなわち、HTTP応答の最後のビットが直接受信される時間)のUNIXタイムスタンプを特徴付ける.リダイレクトがない場合、またはリダイレクトの異なるソースがある場合、この値は0を返します.
PerformanceTiming.fetchStartは符号なしlong long型のミリ秒数であり、ブラウザがHTTPリクエストを使用してドキュメントを取得する準備ができているUNIXタイムスタンプを特徴付けている.この時点では、アプリケーションキャッシュがチェックされる前に.
PerformanceTiming.domainLookupStartは符号なしlong long型のミリ秒数で、ドメイン名クエリの開始のUNIXタイムスタンプを特徴付けています.持続接続(persistent connection)が使用する場合、またはこの情報がキャッシュまたはローカルリソースに格納されている場合、この値はPerformanceTimingとなる.fetchStartは一致しています.
PerformanceTiming.domainLookupEndは符号なしlong long型のミリ秒数であり、ドメイン名クエリが終了したUNIXタイムスタンプを特徴付けている.持続接続(persistent connection)が使用する場合、またはこの情報がキャッシュまたはローカルリソースに格納されている場合、この値はPerformanceTimingとなる.fetchStartは一致しています.
PerformanceTiming.connectStartは、符号なしlong long型のミリ秒数であり、HTTPリクエストがサーバへの送信を開始したときのUnixミリ秒タイムスタンプを返します.永続接続(persistent connection)を使用する場合、戻り値はfetchStartプロパティの値と同じです.
PerformanceTiming.connectEndは、シンボルなしlong long型のミリ秒数で、ブラウザとサーバ間の接続が確立されたときのUnixミリ秒タイムスタンプを返します.永続接続が確立されている場合、戻り値はfetchStartプロパティの値と同じです.接続確立とは、すべての握手と認証プロセスがすべて終了することを意味します.
PerformanceTiming.SecureConnectionStartは符号なしlong long型のミリ秒数で、ブラウザとサーバがセキュリティリンクの握手を開始したときのUnixミリ秒タイムスタンプを返します.現在のWebページにセキュリティ接続が必要でない場合は、0を返します.
PerformanceTiming.requestStartは、符号なしlong long型のミリ秒数であり、ブラウザがサーバにHTTPリクエストを発行したとき(またはローカルキャッシュの読み取りを開始したとき)のUnixミリ秒タイムスタンプを返します.
PerformanceTiming.responseStartは、符号なしlong long型のミリ秒数であり、ブラウザがサーバから最初のバイトを受信(またはローカルキャッシュから読み出し)したときのUnixミリ秒タイムスタンプを返します.トランスポート・レイヤがリクエストの開始後に失敗し、接続が再開されると、このプロパティは、新しいリクエストの対応する開始時間としてカウントされます.
PerformanceTiming.responseEndは、符号なしlong long型のミリ秒数であり、ブラウザがサーバから受信した(またはローカルキャッシュから読み出した、またはローカルリソースから読み出した)最後のバイト(それ以前にHTTP接続が閉じていた場合は閉じた)Unixミリ秒タイムスタンプを返す.
PerformanceTiming.domLoadingは、符号なしlong long型のミリ秒数であり、現在のWebページDOM構造が解析を開始したとき(Document.readyState属性が「loading」になり、対応するreadystatechangeイベントがトリガーされたとき)のUnixミリ秒タイムスタンプを返します.
PerformanceTiming.domInteractiveは、符号なしlong long型のミリ秒数であり、現在のWebページDOM構造の解析が終了し、埋め込みリソースのロードが開始されたとき(Document.readyState属性が「interactive」になり、対応するreadystatechangeイベントがトリガーされたとき)のUnixミリ秒タイムスタンプを返します.
PerformanceTiming.domContentLoadedEventStartは、符号なしlong long型のミリ秒数であり、解析器がDOMContentLoadedイベント、すなわち実行する必要があるすべてのスクリプトが解析されたときのUnixミリ秒タイムスタンプを返す.
PerformanceTiming.domContentLoadedEventEndは、符号なしlong long型のミリ秒数であり、実行順序にかかわらず、直ちに実行する必要があるすべてのスクリプトが実行されたときのUnixミリ秒タイムスタンプを返します.
PerformanceTiming.domCompleteは符号なしlong long型のミリ秒数であり、現在のドキュメントの解析完了、すなわちDocumentを返す.readyStateが「complete」になり、対応するreadystatechangeがトリガーされたときのUnixミリ秒タイムスタンプ.
PerformanceTiming.loadEventStartは、符号なしlong long型のミリ秒数であり、ドキュメントの下でloadイベントが送信されたときのUnixミリ秒タイムスタンプを返します.このイベントがまだ送信されていない場合、その値は0になります.
PerformanceTiming.loadEventEndは、符号なしlong long型のミリ秒数であり、loadイベントが終了する、すなわちロードイベントが完了するときのUnixミリ秒タイムスタンプを返す.このイベントがまだ送信されていない場合、または完了していない場合、その値は0になります.
ポイントが来ました!!!以上のパラメータを見て、私たちが望んでいるデータソースがあります.今しなければならないのは、これらのデータを整理して、彼を私たちのプロジェクトで使用しているデータにすることです.収集する時間は2つに分類されます.
1.区間の時間がかかる
DNS解析に時間がかかる

dns: timing.domainLookupEnd - timing.domainLookupStart

TCP接続時間

tcp: timing.connectEnd - timing.connectStart

SSL安全接続に時間がかかる

ssl: timing.connectEnd - timing.secureConnectionStart

Time to First Byte(TTFB)、ネットワークリクエストに時間がかかるTTFBは様々な計算方法があり、ARMSはGoogle Development定義に準拠している.

ttfb: timing.responseStart - timing.requestStart

データ転送に時間がかかる

trans: timing.responseEnd - timing.responseStart

DOM解析に時間がかかる

dom: timing.domInteractive - timing.responseEnd

リソースのロードに時間がかかる

res: timing.loadEventStart - timing.domContentLoadedEventEnd

2.重要な性能指標
最初のパッケージ時間

firstbyte: timing.responseStart - timing.domainLookupStart

First Paint Time、初回レンダリング時間/ホワイトスクリーン時間

fpt: timing.responseEnd - timing.fetchStart

Time to Interact、初回対話可能時間

tti: timing.domInteractive - timing.fetchStart

HTMLロード完了時間、すなわちDOM Ready時間

ready: timing.domContentLoadedEventEnd - timing.fetchStart

ページフルロード時間

load:timing.loadEventEnd - timing.fetchStart

今この2つの部分のデータがあって、私达はこれらのデータを私达のバックグラウンドのサービスにアップロードすることができて、とても简単ではありませんか、^^.収集したデータをどのように表示するかについては、(http://hubing.online:8083)ちらっと見てよ.
よくわからない?では、ソースをもう少し添付しましょう.

    //  perf
    let performanceTime = function () {
        var timing = performance.timing;
        var loadTime = timing.loadEventEnd - timing.navigationStart;//     ,loadEventEnd    0
        if (loadTime <= 0) {
            //     ，  200ms   times  ，    
            setTimeout(function () {
                performanceTime();
            }, 200);
            return;
        }
        uploadUserData(1, {
            // 1.      
            //  DNS      
            dns: formatTime(timing.domainLookupEnd - timing.domainLookupStart),
            // TCP     
            tcp: formatTime(timing.connectEnd - timing.connectStart),
            // SSL       
            ssl: formatTime(timing.connectEnd - timing.secureConnectionStart),
            // Time to First Byte（TTFB），       TTFB        ，ARMS   Google Development     
            ttfb: formatTime(timing.responseStart - timing.requestStart),
            //       
            trans: formatTime(timing.responseEnd - timing.responseStart),
            // DOM     
            dom: formatTime(timing.domInteractive - timing.responseEnd),
            //       
            res: formatTime(timing.loadEventStart - timing.domContentLoadedEventEnd),
            // 2.      
            //     
            firstbyte: formatTime(timing.responseStart - timing.domainLookupStart),
            // First Paint Time,        /     
            fpt: formatTime(timing.responseEnd - timing.fetchStart),
            // Time to Interact，       
            tti: formatTime(timing.domInteractive - timing.fetchStart),
            // HTML       ，   DOM Ready   
            ready: formatTime(timing.domContentLoadedEventEnd - timing.fetchStart),
            //         
            load: function () {
                return formatTime(timing.loadEventEnd - timing.fetchStart);
            }(),
            navt: (function () {
                let type = "";
                switch (performance.navigation.type) {
                    case 0:
                        type = 'NAVIGATE';
                        break;
                    case 1:
                        type = 'RELOAD';
                        break;
                    case 2:
                        type = 'BACK_FORWARD';
                        break;
                    case 255:
                        type = 'RESERVED';
                        break;
                }
                return type;
            })()
        });
    }
​
    window.addEventListener("load", function () {
        performanceTime();
    });

好きならいいね
あるいは行くhttps://github.com/kisslove/w...スタート
あるいは賞を与える
あるいは...
ははは、考えが少し多くなりました.