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

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

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

下面放一個(gè)頁(yè)面函數(shù)顯示當(dāng)前頁(yè)面的各階段加載的時(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)備新頁(yè)面時(shí)間耗時(shí): ' + readyStart);
 console.log('redirect 重定向耗時(shí): ' + redirectTime);
 console.log('Appcache 耗時(shí): ' + appcacheTime);
 console.log('unload 前文檔耗時(shí): ' + unloadEventTime);
 console.log('DNS 查詢(xún)耗時(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ù)耗時(shí): ' + domReadyTime);
 console.log('load事件耗時(shí): ' + loadEventTime);
 console.log('加載時(shí)間耗時(shí): ' + loadTime);
}

performance 方法

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

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

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

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

文末

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

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

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

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

廣告

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