パフォーマンス監視ウェブサイトのパフォーマンスデータ

免責事項：この記事はブロガーオリジナル記事ですが、許可ブロガーなく再生してはなりません。https://blog.csdn.net/u012193330/article/details/79488134

一般的に、我々はブラウザを介してツールをデバッグすることができます - ページのロードを表示するために、ネットワークパネル、またはプロキシツールのプロセスの様々な段階を消費します。window.performanceプロパティはマイクロ秒の精度で、ミリ秒単位で、より正確な生データを取得することができます活用。

プロパティ説明：

navigationStart：現在のWebブラウザの起動時の処理
fetchStart：ドキュメントミリ秒のタイムスタンプを読み出す要求を開始するために、HTTPブラウザ。
domainLookupStart：スタートのドメイン検索のタイムスタンプ。
domainLookupEnd：ドメイン名のクエリの最後にタイムスタンプ。
connectStart：HTTPリクエストのタイムスタンプは、サーバーに送信されます。
connectEnd：接続を確立するために、ブラウザとサーバ（ハンドシェイクと認証プロセスが完了した）ミリ秒のタイムスタンプ。
requestStart：ブラウザがHTTPサーバに要求を行うタイムスタンプ。またはローカルキャッシュを読んだの先頭に。
responseStart：ブラウザが最初のサーバーからのバイトを受信（またはローカルキャッシュを読んで）タイムスタンプ。
responseEnd：ブラウザはミリ秒単位のタイムスタンプを受信したときに、サーバからの最後のバイト。
domLoading：時間構造を解析し、ブラウザのスタートページのDOM。
domInteractive：ページのDOMツリーが作成され、時間埋め込みリソースのロードを開始。
domContentLoadedEventStart：タイムスタンプページはDOMContentLoadedイベント。
domContentLoadedEventEnd：時間、スクリプトの実行のすべてのページを実行する必要がdomReady時間が終了しています。
domComplete：DOMタイムスタンプウェブ構造生成。
loadEventStart：現在のWebページのロードイベントコールバック関数が実行を開始するタイムスタンプ。
loadEventEnd：操作の現在のWebページのロードイベントコールバック関数の終了タイムスタンプ。

(function() {

    handleAddListener('load', getTiming)

    function handleAddListener(type, fn) {
        if(window.addEventListener) {
            window.addEventListener(type, fn)
        } else {
            window.attachEvent('on' + type, fn)
        }
    }

    function getTiming() {
        try {
            var time = performance.timing;
            var timingObj = {};

            var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000;

            if(loadTime < 0) { setTimeout(function() { getTiming(); }, 200); return; }

            timingObj['重定向时间'] = (time.redirectEnd - time.redirectStart) / 1000;
            timingObj['DNS解析时间'] = (time.domainLookupEnd - time.domainLookupStart) / 1000;
            timingObj['TCP完成握手时间'] = (time.connectEnd - time.connectStart) / 1000;
            timingObj['HTTP请求响应完成时间'] = (time.responseEnd - time.requestStart) / 1000;
            timingObj['DOM开始加载前所花费时间'] = (time.responseEnd - time.navigationStart) / 1000;
            timingObj['DOM加载完成时间'] = (time.domComplete - time.domLoading) / 1000;
            timingObj['DOM结构解析完成时间'] = (time.domInteractive - time.domLoading) / 1000;
            timingObj['脚本加载时间'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000;
            timingObj['onload事件时间'] = (time.loadEventEnd - time.loadEventStart) / 1000;
            timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS解析时间'] + timingObj['TCP完成握手时间'] + timingObj['HTTP请求响应完成时间'] + timingObj['DOM结构解析完成时间'] + timingObj['DOM加载完成时间']);

            for(item in timingObj) { console.log(item + ":" + timingObj[item] + '毫秒(ms)'); }

            console.log(performance.timing);

        } catch(e) {
            console.log(timingObj)
            console.log(performance.timing);
        }
    }
})();