Answer the question
In order to leave comments, you need to log in
Delay Render VUE.JS. How to avoid?
Hello!
The point is this. Vue.js has a render that draws a graph on the canvas every 100 milliseconds. When the tab is active, everything is ok. When the tab is not active for some time (always in different ways), then when switching to this tab, render starts to run not every 100 milliseconds, but every random number of milliseconds. It feels like everything is hanging. You have to either wait for a long time, or just refresh the page. I note that there are still sockets on the site, but everything seems to be ok with them at this time.
This fact is known:
Most browsers (desktop in the first place) continue to execute setTimeout/setInterval even if the tab is inactive.
At the same time, a number of them (Chrome, FF, IE10) reduce the minimum timer frequency, up to 1 time per second. It turns out that the timer will fire in the "background" tab, but rarely.
When running on battery, in a laptop, browsers can also slow down the frequency to execute code less often and save battery power. IE is especially known for this. The reduction can reach several times, depending on the settings.
Answer the question
In order to leave comments, you need to log in
But if instead they would draw svg as a regular vue component with reactivity, then there would be no problems. In general, using set timeout instead of request animation frame is weird in 2k18.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question