ブラウザページのロードパフォーマンス

ページ全体の消費時間:

window.performance.timing

ページ上の静的リソースのロード時間:

Webページのすべてのリソースとタグのデータを返します:window.performance.getEntries()

entryTypeに従ってデータを返す:window.performance.getEntriesByType() window.performance.getEntriesByType(‘resource’)

nameに基づいてデータを返す:window.performance.getEntriesByName()

詳細プロセス:
前のページunload、リダイレクト(ページがジャンプし、同ドメイン名の下に属する)、
fetchファイル:

  （              ）， 

DNS      （              ，      ）

接続:

HTTP （TCP）   （       ，   fetchStart    ；                     ，）

HTTP              （      ）

HTTP          

レンダリングDOM:

      DOM  ， Document.readyState    interactive，               

Webページ内のリソースのロード、
JSスクリプトのロードが完了しました
DOMツリー解析が完了し、リソースも準備完了

window.performance = {
    timing: {
        //      ，     unload     ，
        //                 
        //    fetchStart    
        navigationStart: 1441112691935,

        //      unload     ，
        //          unload
        //                ，    0
        unloadEventStart: 0,

        //   unloadEventStart    
        //         unload                   
        unloadEventEnd: 0,

        //     HTTP          。
        //                
        //      0 
        redirectStart: 0,

        //      HTTP          
        //                 
        //      0 
        redirectEnd: 0,

        //          HTTP          
        //            
        fetchStart: 1441112692155,

        // DNS          
        //          （   DNS   ）     
        //    fetchStart    
        domainLookupStart: 1441112692155,

        // DNS          
        //          （   DNS   ）     
        //    fetchStart    
        domainLookupEnd: 1441112692155,

        // HTTP（TCP）          
        //        ，   fetchStart    
        //                     ，
        //                 
        connectStart: 1441112692155,

        // HTTP（TCP）          （    ）
        //        ，   fetchStart    
        //                     ，
        //                 
        //         ，          、SOCKS     
        connectEnd: 1441112692155,

        // HTTPS        ，
        //         ，    0
        secureConnectionStart: 0,

        // HTTP              （      
        //          
        //        ，               
        requestStart: 1441112692158,

        // HTTP          （        )
        //          
        responseStart: 1441112692686,

        // HTTP            （         ）
        //          
        responseEnd: 1441112692687,

        //        DOM     
        //    Document.readyState    loading
        //      readystatechange     
        domLoading: 1441112692690,

        //      DOM     
        // Document.readyState    interactive
        //      readystatechange     
        //      DOM      
        //                
        domInteractive: 1441112693093,

        // DOM      ，            
        //   DOMContentLoaded        
        domContentLoadedEventStart: 1441112693093,

        // DOM      ，
        //             
        //   JS        
        domContentLoadedEventEnd: 1441112693101,

        // DOM      
        //            
        // Document.readyState    complete
        //      readystatechange     
        domComplete: 1441112693214,

        // load        
        //    load            
        //          load   ，   0
        loadEventStart: 1441112693214,

        // load               
        loadEventEnd: 1441112693215
    }
}   

時間パフォーマンスの測定
3つの方法:
1つ目:

var start1 = +new Date();
function();
var end1 = +new Date();
console.log(end1-start1);

2つ目:

var start2 = window.performance.now();
function();
var end2 = window.performance.now();
console.log(end1-start1);   

3つ目:

window.performance.mark("start3");
function();
window.performance.mark("end3");
window.performance.measure("difference", "start3", "end3");
console.table(performance.getEntriesByName('difference'));

比較:

//     
var ret=[];
var start1 = +new Date();
var start2 = window.performance.now();
window.performance.mark("start3");
for (var i = 0; i < 100; i++) {
    ret.push(i);
}
var end1 = +new Date();
var end2 = window.performance.now();
//     
window.performance.mark("end3");
//         difference,    
window.performance.measure("difference", "start3", "end3");

// window.performance.getEntriesByType('measure');
// window.performance.getEntriesByName('difference');

console.log(end1-start1);
console.log(end2-start2);
console.table(performance.getEntriesByName('difference'));



// //        
// window.performance.clearMarks('start');  
// //        
// window.performance.clearMarks();

// //         
// window.performance.clearMeasures('difference');  
// //         
// window.performance.clearMeasures();      

参照先:

http://www.atatech.org/articles/60540/?frm=mail_daily&uid=223313