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

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

memory（Chrome中內存）

jsHeapSizeLimit: 內存大小限制
totalJSHeapSize: 可使用內存
usedJSHeapSize: 已使用內存

• navigation（上下文網頁導航）
• onresourcetimingbufferfull（資源時間性能緩沖區(qū)事件鉤子）
• timeOrigin（基準時間）
• timing（節(jié)點時間）

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

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

performance 方法

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

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

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

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

文末

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

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

分享題目：前端性能優(yōu)化監(jiān)控之performance API
文章轉載：http://m.2m8n56k.cn/news8/101458.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站設計、品牌網站建設、響應式網站、面包屑導航、網站設計公司、域名注冊

廣告

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