Foreword
In order to improve their English, try to translate some English technical articles, first of all from this small tip Vue beginning, the English version of the current total of 22. When plans to use two to three months to complete the translation.
Current progress [2/22]
original
Measure runtime performance in Vue.js apps
Translation
In the previous article, we discussed how to improve the performance of large data. But we have not measured how much it improves.
We can use Chrome DevTools performance options to achieve this. But in order to obtain accurate data, we must activate performance mode on Vue.
We can main.jsset global variables or plug-in code is as follows:
Vue.config.performance = true;
复制代码If you set the correct NODE_ENV environment variables, you can use a non-production environment to make a judgment.
const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;
复制代码This activates the performance of the components within the tag Vue the User the Timing the API .
Previous article content, I have codesandbox created the code. Open the Chrome DevTools in the performance option and click the reload button.
This will record the page load performance. Meanwhile, thank you for main.jsthe Vue.config.performancesettings, this setting will make you able to see in the statistics User Timingsection.
Where you'll find three indicators:
- The init : Created required component instance
- Render : Created VDom structure needed
- Patch : VDom applied to the actual time of Dom
Back to the article curious (how much performance improvement) where the result is: a normal component needs 417 milliseconds Initialization:
The use Object.freezeprevents the default response only need 3.9 ms:
Of course, the results of each run will have a small change, but there are still very large differences in performance. Because there will be the default reaction of problems when creating components, you can Init(initialization index) prevented see no difference between the default and stop the reaction.
That's it!
You can read the online article Tip Online (can copy / paste the code), but please remember, if you like, and to all my colleagues share VueDose .
See you next week.
I understand
vue project, we can set the global main.js Vue.config.performanceis trueto open performance testing, can be distinguished by the need to open the environment variable, and then you can see the statistical performance data through Chrome DevTools in the performance options.
end
Limited, it is inevitable that errors and omissions, you look much light spray at the same time be able to point out, Guixie!
Other Translations
1. Translation: improve performance in large-scale data vue.js
2, translation: measure the performance of applications running at the time of vue!
Reproduced in: https: //juejin.im/post/5cf5c3b56fb9a07ee85c1588