介紹利用H5 api接口performance杰刽，統(tǒng)計(jì)網(wǎng)站的加載時(shí)間菠发，進(jìn)而優(yōu)化加載速度。
在做H5項(xiàng)目的時(shí)候贺嫂，首屏加載會(huì)是一個(gè)比較重要的部分滓鸠，加載越快，用戶流失就會(huì)越少第喳，受限于網(wǎng)絡(luò)等原因糜俗，可能一些人看到首頁(yè)較快，一些人看到首頁(yè)較慢曲饱，然后作為程序員卻無(wú)法準(zhǔn)確得知加載慢是因?yàn)槭裁丛蛟斐傻姆园希瑳](méi)有辦法去細(xì)化優(yōu)化點(diǎn)。
幸運(yùn)的是H5新API接口performance能讓我們做的更多一點(diǎn)
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;
//過(guò)早獲取時(shí) domComplete有時(shí)會(huì)是0loadEventTime = timing.loadEventEnd - timing.loadEventStart;loadTime = timing.loadEventEnd - timing.navigationStart;
//過(guò)早獲取時(shí) loadEventEnd有時(shí)會(huì)是0
console.log('準(zhǔn)備新頁(yè)面時(shí)間耗時(shí): ' + readyStart);
console.log('redirect 重定向耗時(shí): ' + redirectTime);
console.log('Appcache 耗時(shí): ' + appcacheTime);
console.log('unload 前文檔耗時(shí): ' + unloadEventTime);
console.log('DNS 查詢耗時(shí): ' + lookupDomainTime);
console.log('TCP連接耗時(shí): ' + connectTime);
console.log('request請(qǐng)求耗時(shí): ' + requestTime);
console.log('請(qǐng)求完畢至DOM加載: ' + initDomTreeTime);
console.log('DOM加載完成: ' + domReadyTime);
console.log('從開(kāi)始至load總耗時(shí): ' + loadTime);
}
},2000)
}
通過(guò)分析渔工，發(fā)現(xiàn)用此方法 DOM加載完成和全部加載完成耗用的時(shí)間和chrome瀏覽器NETWORDK面板上顯示的DomContentLoaded 锌钮、Load時(shí)間基本一致，誤差幾ms引矩，
所以我們基本上可以用這個(gè)方法來(lái)統(tǒng)計(jì)我們所做的H5網(wǎng)站在不同地域梁丘、不同客戶端下加載H5所耗用的時(shí)間侵浸，進(jìn)而逐個(gè)優(yōu)化。比如DNS耗時(shí)拉 DOM加載耗時(shí)了 等等
window.performance.timing.jpg
