前端性能優(yōu)化監(jiān)控之performance API

前端開發(fā)完之后，業(yè)務(wù)說太卡，你優(yōu)化吧。我打開一個(gè)離職的同事的代碼，復(fù)用到是用的挺好的，不過把一個(gè)城市級(jí)聯(lián)里面下載數(shù)據(jù)的環(huán)節(jié)封裝到組件中，頁面中有8個(gè)地方都用到了，打開網(wǎng)絡(luò)請(qǐng)求，真的就下載了8次2M的城市數(shù)據(jù)。幸好我們網(wǎng)絡(luò)情況還不錯(cuò)，也就每次頁面打開前卡半分鐘而已，呵呵了。

在前后端分離的大環(huán)境下，前端優(yōu)化也越來越重要。無論從視覺、性能、頁面邏輯上進(jìn)行優(yōu)化，都可以比較直觀的提升用戶體驗(yàn)。當(dāng)然，優(yōu)化的前提是知道我哪里慢了，performance API就是進(jìn)行這樣的監(jiān)控的。

memory（Chrome中內(nèi)存）

jsHeapSizeLimit: 內(nèi)存大小限制
totalJSHeapSize: 可使用內(nèi)存
usedJSHeapSize: 已使用內(nèi)存

• navigation（上下文網(wǎng)頁導(dǎo)航）
• onresourcetimingbufferfull（資源時(shí)間性能緩沖區(qū)事件鉤子）
• timeOrigin（基準(zhǔn)時(shí)間）
• timing（節(jié)點(diǎn)時(shí)間）

通過拆解計(jì)算各個(gè)節(jié)點(diǎn)時(shí)間的間隔就是每個(gè)環(huán)節(jié)的使用情況了。

下面放一個(gè)頁面函數(shù)顯示當(dāng)前頁面的各階段加載的時(shí)間顯示。

function performanceTest() {
 let timing = performance.timing,
 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,
 whiteScreenTime = timing.responseStart - timing.navigationStart,
 requestTime = timing.responseEnd - timing.requestStart,
 initDomTreeTime = timing.domInteractive - timing.responseEnd,
 domReadyTime = timing.domComplete - timing.domInteractive,
 loadEventTime = timing.loadEventEnd - timing.loadEventStart,
 loadTime = timing.loadEventEnd - timing.navigationStart;
 console.log('準(zhǔn)備新頁面時(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('白屏?xí)r間: ' + whiteScreenTime);
 console.log('request請(qǐng)求耗時(shí): ' + requestTime);
 console.log('請(qǐng)求完畢至DOM加載: ' + initDomTreeTime);
 console.log('解析DOM樹耗時(shí): ' + domReadyTime);
 console.log('load事件耗時(shí): ' + loadEventTime);
 console.log('加載時(shí)間耗時(shí): ' + loadTime);
}

performance 方法

1. clearMarks() 清理打點(diǎn)標(biāo)記
2. clearMeasures() 清理連線標(biāo)記
3. clearResourceTimings() 重置緩沖區(qū)域大小
4. getEntries() 獲取所有資源分節(jié)點(diǎn)加載時(shí)間
5. getEntriesByName() 通過Name獲取所有資源分節(jié)點(diǎn)加載時(shí)間
6. getEntriesByType() 通過Type獲取所有資源分節(jié)點(diǎn)加載時(shí)間
7. mark() 增加打點(diǎn)標(biāo)記
8. measure() 增加打點(diǎn)連線標(biāo)記
9. now() 從獲取基準(zhǔn)時(shí)間到當(dāng)前時(shí)間的間隔，精確到微秒百萬分之一秒，呃
10. setResourceTimingBufferSize() 設(shè)置緩沖區(qū)域大小

chrome開發(fā)這工具的Performance面板

本地開發(fā)調(diào)試的話，chrome中提供了關(guān)于Performance情況更加詳細(xì)的報(bào)表數(shù)據(jù)，精確到每個(gè)資源，每個(gè)時(shí)間點(diǎn)頁面的渲染效果，后續(xù)就可以針對(duì)環(huán)節(jié)進(jìn)行專項(xiàng)優(yōu)化（像我這種密集恐懼的人，看的還有點(diǎn)慌呢）

使用上的性能面板的時(shí)候，如果你的chrome上安裝了很多插件的話，建議打開無痕模式進(jìn)行調(diào)試。

文末

關(guān)于performanceAPI是建立在chrome瀏覽器的基礎(chǔ)上使用的，其他瀏覽器兼容情況暫時(shí)沒有去深究。

前端優(yōu)化，從網(wǎng)絡(luò)開始請(qǐng)求，到最后渲染結(jié)束，中間方方面面的環(huán)節(jié)，都可以進(jìn)行很多優(yōu)化，前端優(yōu)化雅虎軍規(guī)依然是優(yōu)化方向，每一個(gè)環(huán)節(jié)都可以寫出來很多文章。

分享題目：前端性能優(yōu)化監(jiān)控之performance API
文章轉(zhuǎn)載：http://www.bm7419.com/news8/101458.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)