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

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

我們可以使用Chrome DevTools 的性能選項(xiàng)來實(shí)現(xiàn)這一點(diǎn)。但是為了獲取準(zhǔ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)部激活標(biāo)記組件性能的User Timing API

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

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

在哪里，你會(huì)發(fā)現(xiàn)3個(gè)指標(biāo)：

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

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

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

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

就是這樣！

我的理解

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

結(jié)尾

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

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

當(dāng)前名稱：如何測量vue應(yīng)用運(yùn)行時(shí)的性能
鏈接URL：http://jinyejixie.com/article22/pgedcc.html

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

廣告

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