javascript - Vuetify performance issues - Stack Overflow

admin管理员组

文章数量:1277898

I have picked vuetify for an offline PWA project where I work with indexed DB and some notable size data (5k-6k/collection). I have to transfer it between vuex and IDB after I get them from the server. Reading and saving them is kinda slow (200-300 ms), and freezing the UI for a short time. I thought making a full-screen loading screen while it was loading helped, but it still make the loader stutter. Also, I have some problems when I am navigating between pages. Loading v-lists (with infinity loading) and swiper (swiper slider) freeze the UI and it feels a little bit off. Especially, when I am adding vibrating to the buttons. The freezing delays the vibration for 100-200 ms and I don't know I am touched the button or not.

Things I've tried so far:

• Looping through the list elements, and freezing the objects at vuex mutations (I want to keep the reactivity for array methods). It feels faster, however cloning arrays can delay the initial loading. And still not satisfying.

• Using requestAnimationFrame solves the freezing at navigation, but delays the rendering of childponents. Also doesn't seem like the best solution.

• Using less dom elements. I'am using infinity scrolls for v-lists. It still loads slow despite it only rendering 15 rows. I cannot use a virtual list, because the list elements have different heights. I didn't find a carousel/swiper with proper virtualization. Vue-awesome-swiper is the most popular, but it loads incredibly slow.

My app

Sadly I cannot share the project here, But I don't use any extraordinary code, that's why I am confused about the low performance.

At service workflow

Getting data as JSON from the server -> vuex action -> mitting mutation and saving data to IDB with Dexie's bulkPut -> mutation freezes the objects and saves to the state

At visualization

ponents using mapgetters to get the lists from vuex. Using these getters, I am making puted properties to filter/reorder data (these methods run under 30ms, so they shouldn't make issues).

I couldn't find any helpful information on how to make my application faster. Even scrolling down the list seems slowy/laggy. I could use webworker to handle IDB at initial loading, but the UI animations would still be slow. Should I use less v-container/v-layout/v-flex etc... and adding native elements to my app? Currently, I am using only vuetify elements.

As I am loading all my data at starting, I am expecting a slower initial loading time for sure, but smooth navigating and fast loading after that.

I have picked vuetify for an offline PWA project where I work with indexed DB and some notable size data (5k-6k/collection). I have to transfer it between vuex and IDB after I get them from the server. Reading and saving them is kinda slow (200-300 ms), and freezing the UI for a short time. I thought making a full-screen loading screen while it was loading helped, but it still make the loader stutter. Also, I have some problems when I am navigating between pages. Loading v-lists (with infinity loading) and swiper (swiper slider) freeze the UI and it feels a little bit off. Especially, when I am adding vibrating to the buttons. The freezing delays the vibration for 100-200 ms and I don't know I am touched the button or not.

Things I've tried so far:

• Looping through the list elements, and freezing the objects at vuex mutations (I want to keep the reactivity for array methods). It feels faster, however cloning arrays can delay the initial loading. And still not satisfying.

• Using requestAnimationFrame solves the freezing at navigation, but delays the rendering of childponents. Also doesn't seem like the best solution.

• Using less dom elements. I'am using infinity scrolls for v-lists. It still loads slow despite it only rendering 15 rows. I cannot use a virtual list, because the list elements have different heights. I didn't find a carousel/swiper with proper virtualization. Vue-awesome-swiper is the most popular, but it loads incredibly slow.

My app

Sadly I cannot share the project here, But I don't use any extraordinary code, that's why I am confused about the low performance.

At service workflow

Getting data as JSON from the server -> vuex action -> mitting mutation and saving data to IDB with Dexie's bulkPut -> mutation freezes the objects and saves to the state

At visualization

ponents using mapgetters to get the lists from vuex. Using these getters, I am making puted properties to filter/reorder data (these methods run under 30ms, so they shouldn't make issues).

I couldn't find any helpful information on how to make my application faster. Even scrolling down the list seems slowy/laggy. I could use webworker to handle IDB at initial loading, but the UI animations would still be slow. Should I use less v-container/v-layout/v-flex etc... and adding native elements to my app? Currently, I am using only vuetify elements.

As I am loading all my data at starting, I am expecting a slower initial loading time for sure, but smooth navigating and fast loading after that.

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Dec 4, 2022 at 1:19 ElsaKarami 64611 gold badge44 silver badges1616 bronze badges asked May 17, 2019 at 19:40 The GuardianThe Guardian 32444 silver badges77 bronze badges 6

• We are talking about 0.1 and 0.3 seconds, it takes 0.3 seconds for our eye to blink so... You sure about those times? That sounds quite fast for saving data. Ideal if you ask me. – enbermudas Commented May 17, 2019 at 20:22
• 3 Yes, as data processing time, it is fast. But it makes the UI unresponsive/slow. As 2019, I don't want to see stuttering animations and additional loaders once my app is loaded. – The Guardian Commented May 18, 2019 at 7:14
• 1 I've struggled with vuetify's animation performance for nearly 2 years now. It's gotten a lot better, but it's still extremely noticable in some areas like you mention sadly. – Xander Luciano Commented Jul 1, 2020 at 10:34
• 7 Without any code it's really hard to provide help here. I understand that you cannot share the full project, but that's not needed: you should create a minimal example which still exposes the problem (and it's not unlikely that you will find the issue while creating that example). If you don't want to do that: my preferred way to deal with such issues is to mock out single subsystems and see their impact on performance. E.g. replace all store/db lookup with static data. If the UI is still equally laggy, you know that it's not the data layer. – dr_barto Commented Aug 6, 2021 at 7:52
• 1 The topic is very broad. The animated loader can be built using css/svg or canvas and webworker. Related the overall vue performance I would suggest to start with 1, 2, 3. – Kasheftin Commented Sep 2, 2022 at 15:44

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 0

My site is entirely on Laravel and Vuetify technology. Just a few remendations. First, there must be a very fast server. Not average in terms of speed, but a fast one. Secondly, the page should not have full-page Vue ponents. They are first mounted, then displayed. The user sees this as a display after some delay. Further, there should be no data loading via the API after the layout is displayed (the getData method in the mounted hook). And, of course, loading a large amount of data via prop {{json_encode($data)}} delays and degrades performance.

We've built an application with vue/vuetify, where the main ponent is a plex multidimensional grid generated on the fly.

Our first iteration was painfully slow, once, with meaningful data, we got a rendering time of 9 sec ...

The solution to our problem was two fold:

• use functional ponents wherever possible,
• use Object.freeze on data that doesn't need to be reactive (as mentioned) - at this link an explanation of the optimization technique

Now rendering the same ponent takes fractions of a second.

From the doc:

Functional ponents are an alternative form of ponent that don't have any state of their own. They act like pure functions: props in, vnodes out. They are rendered without creating a ponent instance (i.e. no this), and without the usual ponent lifecycle hooks.

as always, just my 2c :)

I think you were on the right track with loading states/screens. You can prevent unwanted freezing and stuttering in the rendered pages caused by blocking using async functions for any api calls or db queries. Vuex actions are async by default, so as long as you make sure no API/IDB calls are being made synchronously when the app is initialised, you shouldn't see any stutter (or at least not stutter caused by synchronous calls blocking rendering). Using some sort of interface you define yourself can help with that, e.g., make a function like:

export const queryIndexedDB = async options => {
  // set loading state
  // query db ...
  // unset loading state
  // return results
}

and make sure all of your IndexedDB queries go through this. AJAX call helpers like axios are also async by default so should do this for you out of the box.

本文标签： javascriptVuetify performance issuesStack Overflow