Nodejs中分析web前端性能(window.performance)
在nodejs中，通過puppeteer來獲取web頁(yè)面中的window.performance對(duì)象，從而分析頁(yè)面的性能。下面直接上代碼。
專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)灣里免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
const puppeteer = require('puppeteer');
const path = require("path");
const logger=require("./log");
const log = logger.getPuppeteerRecordLogger() ;
/*
啟動(dòng)瀏覽器
*/
async function launchBrowser(){
//啟動(dòng)瀏覽器實(shí)例 [puppeteer.createBrowserFetcher([options])]
let browser = await puppeteer.launch({
// 若是手動(dòng)下載的chromium需要指定chromium地址, 默認(rèn)引用地址為 /項(xiàng)目目錄/node_modules/puppeteer/.local-chromium/
//executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
//如果是訪問https頁(yè)面 此屬性會(huì)忽略https錯(cuò)誤
ignoreHTTPSErrors: true,
// 關(guān)閉headless模式, 不會(huì)打開瀏覽器
headless: true,
//瀏覽器啟動(dòng)參數(shù) https://peter.sh/experiments/chromium-command-line-switches/ --timeout
args:['--disk-cache-size=0','--disable-cache','--disable-infobars','--window-size=800,600','--ignore-certificate-errors','--enable-feaures'],
//是否為每個(gè)選項(xiàng)卡自動(dòng)打開DevTools面板。 如果此選項(xiàng)為true，則headless選項(xiàng)將設(shè)置為false。
devtools: false,
//Defaults to 30000 (30 seconds). Pass 0 to disable timeout.
timeout: 0
//放慢puppeteer執(zhí)行的動(dòng)作,方便調(diào)試
//slowMo: 250
});
return browser ;
}
async function saveHarlog(url,dirPath,filename){
let homesite = url ;
//保存的文件路徑
let harFilePath = path.join(dirPath,filename) ;
//處理URL
if(!(url.startsWith('http://') || url.startsWith('https://'))){
url = "http://" + url ;
}
//打開瀏覽器
let browser = await launchBrowser() ;
//創(chuàng)建一個(gè)新頁(yè)面
//let page = await browser.newPage();
const page = (await browser.pages())[0];
try{
await page.goto(url,{
timeout:0
});
/*
在page上下文中得到window.performance.timing
*/
const timing = await page.evaluate( _ => {
const {navigationStart,unloadEventStart,unloadEventEnd,
redirectStart,redirectEnd,fetchStart,domainLookupStart,
domainLookupEnd,connectStart,connectEnd,secureConnectionStart,
requestStart,responseStart,responseEnd,domLoading,domInteractive,
domContentLoadedEventStart,domContentLoadedEventEnd,domComplete,
loadEventStart,loadEventEnd} = window.performance.timing;
return ({navigationStart:navigationStart,
unloadEventStart:unloadEventStart,
unloadEventEnd:unloadEventEnd,
redirectStart:redirectStart,
redirectEnd:redirectEnd,
fetchStart:fetchStart,
domainLookupStart:domainLookupStart,
domainLookupEnd:domainLookupEnd,
connectStart:connectStart,
connectEnd:connectEnd,
secureConnectionStart:secureConnectionStart,
requestStart:requestStart,
responseStart:responseStart,
responseEnd:responseEnd,
domLoading:domLoading,
domInteractive:domInteractive,
domContentLoadedEventStart:domContentLoadedEventStart,
domContentLoadedEventEnd:domContentLoadedEventEnd,
domComplete:domComplete,
loadEventStart:loadEventStart,
loadEventEnd:loadEventEnd})
})
log.info('--->' + JSON.stringify(timing)) ;
if(timing){
//long 型的毫秒數(shù)。上一個(gè)文檔卸載(unload)結(jié)束時(shí)的UNIX時(shí)間戳。如果沒有上一個(gè)文檔，這個(gè)值會(huì)和fetchStart相同。
let navigationStart = timing.navigationStart ;
//long 型的毫秒數(shù).表征了unload事件拋出時(shí)的UNIX時(shí)間戳,如果沒有上一個(gè)文檔, 這個(gè)值會(huì)返回0
let unloadEventStart = timing.unloadEventStart ;
//long 型的毫秒數(shù)，表征了unload事件處理完成時(shí)的UNIX時(shí)間戳。如果沒有上一個(gè)文檔, 這個(gè)值會(huì)返回0
let unloadEventEnd = timing.unloadEventEnd ;
//long 型的毫秒數(shù)，表征了第一個(gè)HTTP重定向開始時(shí)的UNIX時(shí)間戳。如果沒有重定向，或者重定向中的一個(gè)不同源，這個(gè)值會(huì)返回0.
let redirectStart = timing.redirectStart ;
//long 型的毫秒數(shù)，表征了最后一個(gè)HTTP重定向完成時(shí)（也就是說是HTTP響應(yīng)的最后一個(gè)比特直接被收到的時(shí)間）的UNIX時(shí)間戳。如果沒有重定向，或者重定向中的一個(gè)不同源，這個(gè)值會(huì)返回0.
let redirectEnd = timing.redirectEnd ;
//long 型的毫秒數(shù)，表征了瀏覽器準(zhǔn)備好使用HTTP請(qǐng)求來獲取(fetch)文檔的UNIX時(shí)間戳。這個(gè)時(shí)間點(diǎn)會(huì)在檢查任何應(yīng)用緩存之前。
let fetchStart = timing.fetchStart ;
//long 型的毫秒數(shù)，表征了域名查詢開始的UNIX時(shí)間戳。如果使用了持續(xù)連接(persistent connection)，或者這個(gè)信息存儲(chǔ)到了緩存或者本地資源上，這個(gè)值將和fetchStart一致。
let domainLookupStart = timing.domainLookupStart ;
//long 型的毫秒數(shù)，表征了域名查詢結(jié)束的UNIX時(shí)間戳。如果使用了持續(xù)連接(persistent connection)，或者這個(gè)信息存儲(chǔ)到了緩存或者本地資源上，這個(gè)值將和 fetchStart一致。
let domainLookupEnd = timing.domainLookupEnd ;
//long 型的毫秒數(shù)，返回HTTP請(qǐng)求開始向服務(wù)器發(fā)送時(shí)的Unix毫秒時(shí)間戳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值。
let connectStart = timing.connectStart ;
//long 型的毫秒數(shù)，返回瀏覽器與服務(wù)器之間的連接建立時(shí)的Unix毫秒時(shí)間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認(rèn)證過程全部結(jié)束。
let connectEnd = timing.connectEnd ;
//long 型的毫秒數(shù)，返回瀏覽器與服務(wù)器開始安全鏈接的握手時(shí)的Unix毫秒時(shí)間戳。如果當(dāng)前網(wǎng)頁(yè)不要求安全連接，則返回0
let secureConnectionStart = timing.secureConnectionStart ;
//long 型的毫秒數(shù)，返回瀏覽器向服務(wù)器發(fā)出HTTP請(qǐng)求時(shí)（或開始讀取本地緩存時(shí)）的Unix毫秒時(shí)間戳
let requestStart = timing.requestStart ;
//long 型的毫秒數(shù)，返回瀏覽器從服務(wù)器收到（或從本地緩存讀?。┑谝粋€(gè)字節(jié)時(shí)的Unix毫秒時(shí)間戳。如果傳輸層在開始請(qǐng)求之后失敗并且連接被重開，該屬性將會(huì)被數(shù)制成新的請(qǐng)求的相對(duì)應(yīng)的發(fā)起時(shí)間。
let responseStart = timing.responseStart ;
//long 型的毫秒數(shù)，返回瀏覽器從服務(wù)器收到（或從本地緩存讀取，或從本地資源讀?。┳詈笠粋€(gè)字節(jié)時(shí)（如果在此之前HTTP連接已經(jīng)關(guān)閉，則返回關(guān)閉時(shí)）的Unix毫秒時(shí)間戳。
let responseEnd = timing.responseEnd ;
//long 型的毫秒數(shù)，返回當(dāng)前網(wǎng)頁(yè)DOM結(jié)構(gòu)開始解析時(shí)（即Document.readyState屬性變?yōu)椤發(fā)oading”、相應(yīng)的 readystatechange事件觸發(fā)時(shí)）的Unix毫秒時(shí)間戳。
let domLoading = timing.domLoading ;
//long 型的毫秒數(shù)，返回當(dāng)前網(wǎng)頁(yè)DOM結(jié)構(gòu)結(jié)束解析、開始加載內(nèi)嵌資源時(shí)（即Document.readyState屬性變?yōu)椤癷nteractive”、相應(yīng)的readystatechange事件觸發(fā)時(shí)）的Unix毫秒時(shí)間戳
let domInteractive = timing.domInteractive ;
//ong 型的毫秒數(shù)，返回當(dāng)解析器發(fā)送DOMContentLoaded 事件，即所有需要被執(zhí)行的腳本已經(jīng)被解析時(shí)的Unix毫秒時(shí)間戳
let domContentLoadedEventStart = timing.domContentLoadedEventStart ;
//long 型的毫秒數(shù)，返回當(dāng)所有需要立即執(zhí)行的腳本已經(jīng)被執(zhí)行（不論執(zhí)行順序）時(shí)的Unix毫秒時(shí)間戳
let domContentLoadedEventEnd = timing.domContentLoadedEventEnd ;
//long 型的毫秒數(shù)，返回當(dāng)前文檔解析完成，即Document.readyState 變?yōu)?'complete'且相對(duì)應(yīng)的readystatechange 被觸發(fā)時(shí)的Unix毫秒時(shí)間戳
let domComplete = timing.domComplete ;
//long 型的毫秒數(shù)，返回該文檔下，load事件被發(fā)送時(shí)的Unix毫秒時(shí)間戳。如果這個(gè)事件還未被發(fā)送，它的值將會(huì)是0
let loadEventStart = timing.loadEventStart ;
//long 型的毫秒數(shù)，返回當(dāng)load事件結(jié)束，即加載事件完成時(shí)的Unix毫秒時(shí)間戳。如果這個(gè)事件還未被發(fā)送，或者尚未完成，它的值將會(huì)是0
let loadEventEnd = timing.loadEventEnd ;
//呈現(xiàn)了如何導(dǎo)航到當(dāng)前文檔的信息
//let navigation = performance.navigation ;
}
}catch(error){
log.info('resovle error :' + url + "; error message:" + error) ;
}finally{
if(browser){
await browser.close();
}
}
}
exports.launchBrowser = launchBrowser;
exports.saveHarlog = saveHarlog;指標(biāo)說明
//@param t -> timing
async function getPerformanceTiming (t) {
if (!t) {
log.info('not allow null');
return;
}
var times = {};
//【重要】頁(yè)面加載完成的時(shí)間
//【原因】這幾乎代表了用戶等待頁(yè)面可用的時(shí)間
times.loadPage = t.loadEventEnd - t.navigationStart;
//【重要】解析 DOM 樹結(jié)構(gòu)的時(shí)間
//【原因】反省下你的 DOM 樹嵌套是不是太多了！
times.domReady = t.domComplete - t.responseEnd;
//【重要】重定向的時(shí)間
//【原因】拒絕重定向！比如，http://example.com/ 就不該寫成 http://example.com
times.redirect = t.redirectEnd - t.redirectStart;
//【重要】DNS 查詢時(shí)間
//【原因】DNS 預(yù)加載做了么？頁(yè)面內(nèi)是不是使用了太多不同的域名導(dǎo)致域名查詢的時(shí)間太長(zhǎng)？
// 可使用 HTML5 Prefetch 預(yù)查詢 DNS ，見：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
//【重要】讀取頁(yè)面第一個(gè)字節(jié)的時(shí)間
//【原因】這可以理解為用戶拿到你的資源占用的時(shí)間，加異地機(jī)房了么，加cdn 處理了么？加帶寬了么？加 CPU 運(yùn)算速度了么？
// TTFB 即 Time To First Byte 的意思
// 維基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte
times.ttfb = t.responseStart - t.navigationStart;
//【重要】?jī)?nèi)容加載完成的時(shí)間
//【原因】頁(yè)面內(nèi)容經(jīng)過 gzip 壓縮了么，靜態(tài)資源 css/js 等壓縮了么？
times.request = t.responseEnd - t.requestStart;
//【重要】執(zhí)行 onload 回調(diào)函數(shù)的時(shí)間
//【原因】是否太多不必要的操作都放到 onload 回調(diào)函數(shù)里執(zhí)行了，考慮過延遲加載、按需加載的策略么？
times.loadEvent = t.loadEventEnd - t.loadEventStart;
// DNS 緩存時(shí)間
times.appcache = t.domainLookupStart - t.fetchStart;
// 卸載頁(yè)面的時(shí)間
times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
// TCP 建立連接完成握手的時(shí)間
times.connect = t.connectEnd - t.connectStart;
return times;
}
文章題目：Nodejs中分析web前端性能(window.performance)
本文來源：http://bm7419.com/article38/jjejsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 獨(dú)特的微信小程序 ：它的火爆、想象力和前所未有的產(chǎn)品構(gòu)想 2021-12-23
- 微信小程序八大風(fēng)口 2022-05-20
- 微信小程序VS用戶APP 2022-08-17
- 微信小程序背后的理念是什么 2022-06-27
- 使用微信小程序的好處有哪些 2021-02-25
- 關(guān)于微信小程序最需要了解的地方 2021-05-15
- 成都企業(yè)開發(fā)建設(shè)微信小程序之后如何留住用戶？ 2013-06-24
- 微信小程序與各行業(yè)結(jié)合的運(yùn)營(yíng)寶典（1） 2022-09-02
- 微信小程序商城的開發(fā)步驟？ 2022-05-24
- 【微信小程序教程】大神手把手教你制作一個(gè)小程序 2022-06-27
- 微信小程序全流程開發(fā)教程 2022-11-17
- 微信小程序怎么制作 2016-05-25