如何測(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何理解Vue簡(jiǎn)單狀態(tài)管理之store模式
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應(yīng)用程序的各組件之間經(jīng)常需要進(jìn)行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進(jìn)行通信。這種簡(jiǎn)單的數(shù)據(jù)共享模式就是store模式。2021-05-05
vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡(jiǎn)單,引入對(duì)應(yīng)的js和css文件即可,需要的朋友可以參考下2024-03-03
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過(guò)JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過(guò)代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
本文主要介紹了Vite引入虛擬文件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
深入探討Vue計(jì)算屬性與監(jiān)聽(tīng)器的區(qū)別和用途
在Vue的開(kāi)發(fā)中,計(jì)算屬性（Computed Properties）和監(jiān)聽(tīng)器（Watchers）是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽(tīng)器的區(qū)別,以及在何時(shí)使用它們,感興趣的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue組件父與子通信詳解，實(shí)現(xiàn)登錄窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌,這篇文章主要給大家介紹了關(guān)于vue3使用vue-router的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue 項(xiàng)目中當(dāng)訪問(wèn)路由不存在的時(shí)候默認(rèn)訪問(wèn)404頁(yè)面操作
這篇文章主要介紹了vue 項(xiàng)目中當(dāng)訪問(wèn)路由不存在的時(shí)候默認(rèn)訪問(wèn)404頁(yè)面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Form組件提供了表單驗(yàn)證的功能,只需要通過(guò)屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于Element中el-form表單的相關(guān)資料,需要的朋友可以參考下2023-01-01