在上一篇文章中，我們討論了如何提高大型數(shù)據(jù)的性能。但是我們還沒有測量它提高了多少。

創(chuàng)新互聯(lián)建站是專業(yè)的青島網(wǎng)站建設(shè)公司，青島接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行青島網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

我們可以使用Chrome DevTools 的性能選項來實現(xiàn)這一點。但是為了獲取準確數(shù)據(jù)，我們必須在Vue上激活性能模式。

我們可以在main.js或者插件中設(shè)置全局變量，代碼如下：

Vue.config.performance = true;

如果你設(shè)置了正確的 NODE_ENV 環(huán)境變量，那么可以使用非生產(chǎn)環(huán)境做判斷。

const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;

這將在Vue內(nèi)部激活標記組件性能的User Timing API

上一篇文章內(nèi)容，我已經(jīng)在codesandbox上創(chuàng)建了代碼。打開 Chrome DevTools 里的 performance 選項并且點擊重新加載按鈕。

這將記錄頁面加載性能。同時，感謝你在main.js中的Vue.config.performance設(shè)置，這個設(shè)置會使你在統(tǒng)計資料能夠看到User Timing部分。

在哪里，你會發(fā)現(xiàn)3個指標：

• Init：創(chuàng)建組件實例需要的時間
• Render：創(chuàng)建VDom結(jié)構(gòu)需要的時間
• Patch：把VDom應(yīng)用到實際Dom的時間

回到上一篇文章好奇（性能提高了多少）的地方，結(jié)果是：正常的組件需要417毫秒初始化：

而使用Object.freeze阻止了默認反應(yīng)則只需要3.9毫秒：

當然，每次運行的結(jié)果都會有小的變化，但是，仍然有非常巨大的性能差別。由于在創(chuàng)建組件的時候會有默認反應(yīng)的問題，你可以通過Init（初始化指標）看到阻止了默認反應(yīng)和沒有阻止的差異。

就是這樣！

我的理解

vue項目，我們可以通過在全局main.js設(shè)置Vue.config.performance為true來開啟性能檢測，可以通過環(huán)境變量來區(qū)分是否需要開啟，然后就可以通過Chrome DevTools里的 performance 選項去看統(tǒng)計的性能數(shù)據(jù)。

結(jié)尾

水平有限，難免有錯漏之處，望各位大大輕噴的同時能夠指出，跪謝！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前名稱：如何測量vue應(yīng)用運行時的性能
鏈接URL：http://chinadenli.net/article22/pgedcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站設(shè)計、Google、商城網(wǎng)站、網(wǎng)站營銷、小程序開發(fā)

廣告

聲明：本網(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)