Troubleshooting

Performance issues

Most browsers nowadays ship with good tools to help with performance issues in applications. Chrome and Firefox both contain tools to inspect memory and profile execution. There are extra extensions that may be helpful too, such as Lighthouse.

Browser extensions

Some browser extensions can impact performance. The vue-devtools development extension for Vue, for instance, may cause memory leaks, as it holds reference for some objects to show Vuex transactions and components properties.

Check for other extensions, and try a browser in incognito, or in a profile without any extensions.

DOM Reflows

DOM reflows are common source of performance issues. It may require re-designing HTML elements, CSS styles, or changing how JavaScript code changes objects and styles. Things like grouping changes in batches are helpful too.

Most browser extensions are able to display when elements are re-rendered. You want to minimize the number of times that happens, as the event loop of the browser may stay too busy doing that, instead of rendering the elements or reacting to user interactions.

Memory

There are many things that may impact the application performance, including memory use. Use the browser development tools to look at how well the application performs.

1. test without a running workflow
2. does the memory issue happens in specific views, or in only certain views?
3. does it happen with old versions of the UI?

You can also use other tools such as taking snapshots and profiling to accompany the memory use.

You should be able to plot the memory pattern too. It is normal that the memory use goes up a little. But after a while the garbage collector must have collected some objects, and the memory must go down.

There are other things you can look for too when you suspect of memory leaks. Event listeners are common source of memory problems. Detached elements too.

Other performance issues

You can have a code problem. Something that prevents objects of being collected.

Or you could have a component that is being updated too frequently. Take a look at extensions to monitor when components are being rendered.

Vue is great for reactivity. But if you have reactivity where it is not necessary, you may be putting extra load on the browser to monitor things that are not necessary. Each data or computed value used produces an observer/proxy, that keeps looking after objects for changes, and notifying its listeners.

Things like creating frozen objects can be helpful.

For the why-did-you-render extension, you want to copy the WhyDidYouRender.js file to somewhere like src/utils/. Then import and load it in App.vue.

import WhyDidYouRender from '@/utils/WhyDidYouRender'

// install it as a global mixin
Vue.mixin(WhyDidYouRender)

Finally, to inspect the component you are inspecting, just add debug: true to the object.

export default {
  debug: true,
  name: 'GScan',
  ...
}

You want to minimize when components are updated. They must be updated only when necessary, as otherwise it may cause unnecessary reflows or simply decrease the application performance.