如何測量vue應用運行時的性能
在上一篇文章中，我們討論了如何提高大型數(shù)據(jù)的性能。但是我們還沒有測量它提高了多少。
我們可以使用Chrome DevTools 的性能選項來實現(xiàn)這一點。但是為了獲取準確數(shù)據(jù)，我們必須在Vue上激活性能模式。
我們可以在main.js或者插件中設置全局變量，代碼如下：
Vue.config.performance = true;
如果你設置了正確的 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設置，這個設置會使你在統(tǒng)計資料能夠看到User Timing部分。
在哪里，你會發(fā)現(xiàn)3個指標：
- Init：創(chuàng)建組件實例需要的時間
- Render：創(chuàng)建VDom結(jié)構(gòu)需要的時間
- Patch：把VDom應用到實際Dom的時間
回到上一篇文章好奇（性能提高了多少）的地方，結(jié)果是：正常的組件需要417毫秒初始化：
而使用Object.freeze阻止了默認反應則只需要3.9毫秒：
當然，每次運行的結(jié)果都會有小的變化，但是，仍然有非常巨大的性能差別。由于在創(chuàng)建組件的時候會有默認反應的問題，你可以通過Init（初始化指標）看到阻止了默認反應和沒有阻止的差異。
就是這樣！
我的理解
vue項目，我們可以通過在全局main.js設置Vue.config.performance為true來開啟性能檢測，可以通過環(huán)境變量來區(qū)分是否需要開啟，然后就可以通過Chrome DevTools里的 performance 選項去看統(tǒng)計的性能數(shù)據(jù)。
結(jié)尾
水平有限，難免有錯漏之處，望各位大大輕噴的同時能夠指出，跪謝！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中如何通過ref和$parent結(jié)合defineExpose實現(xiàn)父子組件之間的通信
這篇文章主要介紹了vue3中通過ref和$parent結(jié)合defineExpose實現(xiàn)父子組件之間的通信,Vue3中通過ref和$parent的結(jié)合使用，及defineExpose的方法，可以非常便捷地實現(xiàn)父子組件之間的通信，需要的朋友可以參考下2023-07-07
本文主要介紹了Jenkins自動化部署Vue項目的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
關(guān)于element?ui中的el-scrollbar橫向滾動問題
這篇文章主要介紹了關(guān)于element?ui中的el-scrollbar橫向滾動問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue車牌號校驗和銀行校驗實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項目方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇vue綁定事件后獲取綁定事件中的this方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
今天小編就為大家分享一篇Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue.js 實現(xiàn)tab切換并變色操作講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09