Performance suggestions (when large number of api calls happening on load)?
-
Hi, I have an app that loads a kind of dashboard with many divs, each of which makes an axios api call to fetch/supplement its data. If there are many of these shown/in use at the same time, the responsiveness of other elements suffers while they are fetching their data (for example, setting a qdate calendar popup is frozen while too many of these are loading or the dataset being processed is too large). Does anyone have any suggestions for prioritizing the browser resources/cpu for certain interface elements over others? Thanks!
-
btw in searching the web i have found a few suggestions:
https://medium.com/@adamorlowskipoland/outside-main-thread-heavy-task-calculations-in-vue-25a600350db9
https://logaretm.com/blog/2019-12-21-vuex-off-mainthread/
https://dev.to/lhermann/vue-js-pattern-for-async-requests-using-renderless-components-3gd -
@ssuess well if you are talking about web workers, then there’s also this possibility in Quasar:
https://forum.quasar-framework.org/topic/6840/web-workers-how-to-use-in-quasar
I wont talk about possible architecture solutions with many, many API calls, but I will point your attention to a little visual detail offered by Quasar:
https://quasar.dev/vue-components/skeleton
This little gem is used for preview of your components BEFORE you load the data! It is used in many, many other sites, and users are yet accustomed to wait a little more, if page has some “skeletons”. This “little more” gives you much more opportunities to optimize your API calls.
