利用performance統計網站的加載新能

介紹利用H5 api接口performance,統計網站的加載時間,進而優化加載速度。
在做H5項目的時候,首屏加載會是一個比較重要的部分,加載越快,用戶流失就會越少,受限于網絡等原因,可能一些人看到首頁較快,一些人看到首頁較慢,然后作為程序員卻無法準確得知加載慢是因為什么原因造成的,沒有辦法去細化優化點。
幸運的是H5新API接口performance能讓我們做的更多一點

window.onload = function(){
    setTimeout(function(){
        with(performance){
            readyStart = timing.fetchStart - timing.navigationStart;
            redirectTime = timing.redirectEnd  - timing.redirectStart;
            appcacheTime = timing.domainLookupStart  - timing.fetchStart;
            unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
            lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
            connectTime = timing.connectEnd - timing.connectStart;
            requestTime = timing.responseEnd - timing.requestStart;
            initDomTreeTime = timing.domInteractive - timing.responseEnd;
            domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
            loadTime = timing.loadEventEnd - timing.navigationStart;
             //過早獲取時 domComplete有時會是0loadEventTime = timing.loadEventEnd - timing.loadEventStart;loadTime = timing.loadEventEnd - timing.navigationStart;
             //過早獲取時 loadEventEnd有時會是0
            console.log('準備新頁面時間耗時: ' + readyStart);
            console.log('redirect 重定向耗時: ' + redirectTime);
            console.log('Appcache 耗時: ' + appcacheTime);
            console.log('unload 前文檔耗時: ' + unloadEventTime);
            console.log('DNS 查詢耗時: ' + lookupDomainTime);
            console.log('TCP連接耗時: ' + connectTime);
            console.log('request請求耗時: ' + requestTime);
            console.log('請求完畢至DOM加載: ' + initDomTreeTime);
            console.log('DOM加載完成: ' + domReadyTime);
            console.log('從開始至load總耗時: ' + loadTime);
        }
    },2000) 
}

通過分析,發現用此方法 DOM加載完成和全部加載完成耗用的時間和chrome瀏覽器NETWORDK面板上顯示的DomContentLoaded 、Load時間基本一致,誤差幾ms,
所以我們基本上可以用這個方法來統計我們所做的H5網站在不同地域、不同客戶端下加載H5所耗用的時間,進而逐個優化。比如DNS耗時拉 DOM加載耗時了 等等

window.performance.timing.jpg
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,065評論 25 708
  • 擁擠的人潮在鳴笛聲中變得慌亂,風瑟瑟地吹著。這里是嚴寒的北方小城,樹木枝條疏朗地立著,覆著塵,地面是泥水和腳印混雜...
    大蔥zan醬閱讀 335評論 0 0
  • 前言 自從用了vim后,其他IDE就懶得去切換了。原因很簡單,程序員這條路走的長了,總要接觸不同的語言,我喜歡熟悉...
    ShukeZheng閱讀 1,682評論 0 0
  • “我是全宇宙最傻的大逼!” 王八坨子街口,董小球正蹲在路中間,在行人看傻逼的目光下,用吃屎的勁頭吼出一句風騷彪悍的...
    萬噸小螞蟻閱讀 489評論 0 0