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