How to measure the performance of the VUE application

In the previous article, we discussed how to improve the performance of large data. But we haven’t measured it yet.

We can use Chrome DevTools performance options to achieve this. But in order to obtain accurate data, we must activate performance mode on the Vue.


We can set global variables in main.js or plugins, the code is as follows:


vue.config.performance = TRUE
   If you set the correct Node_Env environment variable, you can use a non-production environment to judge. 

const isdev = process.env.node_env! == “Production”; Vue.config.Performance = ISDEV;

 This will be created on the CodesAndbox on the Codesandbox in the Codesandbox in the CodesandBox. Open the Performance option in Chrome DevTools and click the Reload button.   
This will record page loading performance. At the same time, thank you for the Vue.config.PerFormance settings in main.js, this setting will enable you to see the USER TIMING section on the statistics.

Where do you find 3 indicators:

init: Creating a component instance takes

Render: Time to create a VDOM structure 如何测量vue应用运行时的性能

patch: Apply VDOM to the actual DOM time

Where is curious (how much performance), the result is: Normal components take 417 millisecond initialization: 如何测量vue应用运行时的性能

    Use Object.Freeze to block the default reaction, only 3.9 milliseconds:
  • Of course, each run The result will have a small change, but there is still a very huge performance difference. Since there is a default response when you create a component, you can see the difference between the default response and no blockage via the init (initialization indicator).
That is!

如何测量vue应用运行时的性能

VUE project, we can turn on performance detection by setting Vue.config.PerFormance for the whole game main. JS, can pass Environment variables distinguish whether it needs to be turned on, then you can see statistics performance data through the Performance option in Chrome DevTools.

如何测量vue应用运行时的性能


The level is limited, it is inevitable that there is a mistake, and it is expected that you can point out, thank you!

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment