如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能

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

我們可以使用Chrome DevTools 的性能選項(xiàng)來(lái)實(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)建了代碼。打開(kāi) Chrome DevTools 里的 performance 選項(xiàng)并且點(diǎn)擊重新加載按鈕。

這將記錄頁(yè)面加載性能。同時(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)的問(wèn)題，你可以通過(guò)Init（初始化指標(biāo)）看到阻止了默認(rèn)反應(yīng)和沒(méi)有阻止的差異。

就是這樣！

我的理解

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

結(jié)尾

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。