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

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

在前后端分離的大環(huán)境下，前端優(yōu)化也越來越重要。無論從視覺、性能、頁面邏輯上進(jìn)行優(yōu)化，都可以比較直觀的提升用戶體驗。當(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（資源時間性能緩沖區(qū)事件鉤子）
• timeOrigin（基準(zhǔn)時間）
• timing（節(jié)點時間）

通過拆解計算各個節(jié)點時間的間隔就是每個環(huán)節(jié)的使用情況了。

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

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)備新頁面時間耗時: ' + readyStart);
 console.log('redirect 重定向耗時: ' + redirectTime);
 console.log('Appcache 耗時: ' + appcacheTime);
 console.log('unload 前文檔耗時: ' + unloadEventTime);
 console.log('DNS 查詢耗時: ' + lookupDomainTime);
 console.log('TCP連接耗時: ' + connectTime);
 console.log('白屏?xí)r間: ' + whiteScreenTime);
 console.log('request請求耗時: ' + requestTime);
 console.log('請求完畢至DOM加載: ' + initDomTreeTime);
 console.log('解析DOM樹耗時: ' + domReadyTime);
 console.log('load事件耗時: ' + loadEventTime);
 console.log('加載時間耗時: ' + loadTime);
}

performance 方法

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

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

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

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

文末

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

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

網(wǎng)頁名稱：前端性能優(yōu)化監(jiān)控之performance API
分享路徑：http://bm7419.com/news/101458.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、定制開發(fā)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站營銷、外貿(mào)網(wǎng)站建設(shè)

廣告

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