Measure runtime performance in Vue.js

Measure runtime performance in Vue.js

Measure runtime performance in Vue.js .In the last tip we talked about how to improve performance in large lists. But still we haven’t measure how much it really improved.

In the last tip we talked about how to improve performance in large lists. But still we haven’t measure how much it really improved.

We can do so by using the Performance tab in Chrome DevTools. But in order to have accurate data, we must activate performance mode on our Vue app.

We can do that by setting the global, in our main.js file or in a plugin in the case of Nuxt:

Vue.config.performance = true;

Or if you have your NODE_ENV env variable set correctly, you could use it to set it in non-production environments:

const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;

That will activate the User Timing API that Vue uses internally to mark the components performance.

From the last tip, I’ve created this codesandbox. Open it and hit the reload button from the performance tab on Chrome DevTools:

That will record the page load performance. And thanks to the Vue.config.performance setting that you can see set on main.js you’ll be able to see a User Timing section on the profiling:

In there, you’ll find 3 metrics:

  • Init: time it takes to create the component instance
  • Render: time to create the VDom structure
  • Patch: time to apply the VDom structure to the real DOM

Back to the curiosity, the results of the previous tip are the following: the normal component takes 417ms to initalize:

While the non-reactive one using Object.freeze takes 3.9ms:

Of course this can vary a little from run to run, but still the difference must be quite huge. Since the reactivity issue happens when the component is created, you’ll see that difference in the init part of the Reactive and NoReactive components.

That’s it!

Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!

vue-js javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.

Why Vue CLI? - Vue.js

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities. If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.

Vue.js Tab Components Based on Vue Router

vue-router-tab .A tab router component based on Vue Router.