2021-02-17 分類: 網站建設
前端開發完之后,業務說太卡,你優化吧。我打開一個離職的同事的代碼,復用到是用的挺好的,不過把一個城市級聯里面下載數據的環節封裝到組件中,頁面中有8個地方都用到了,打開網絡請求,真的就下載了8次2M的城市數據。幸好我們網絡情況還不錯,也就每次頁面打開前卡半分鐘而已,呵呵了。
在前后端分離的大環境下,前端優化也越來越重要。無論從視覺、性能、頁面邏輯上進行優化,都可以比較直觀的提升用戶體驗。當然,優化的前提是知道我哪里慢了,performance API就是進行這樣的監控的。
jsHeapSizeLimit: 內存大小限制 totalJSHeapSize: 可使用內存 usedJSHeapSize: 已使用內存
通過拆解計算各個節點時間的間隔就是每個環節的使用情況了。
下面放一個頁面函數顯示當前頁面的各階段加載的時間顯示。
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); }
本地開發調試的話,chrome中提供了關于Performance情況更加詳細的報表數據,精確到每個資源,每個時間點頁面的渲染效果,后續就可以針對環節進行專項優化(像我這種密集恐懼的人,看的還有點慌呢)
使用上的性能面板的時候,如果你的chrome上安裝了很多插件的話,建議打開無痕模式進行調試。
關于performanceAPI是建立在chrome瀏覽器的基礎上使用的,其他瀏覽器兼容情況暫時沒有去深究。
前端優化,從網絡開始請求,到最后渲染結束,中間方方面面的環節,都可以進行很多優化,前端優化雅虎軍規依然是優化方向,每一個環節都可以寫出來很多文章。
分享題目:前端性能優化監控之performance API
文章轉載:http://m.newbst.com/news8/101458.html
成都網站建設公司_創新互聯,為您提供品牌網站設計、品牌網站建設、響應式網站、面包屑導航、網站設計公司、域名注冊
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容