C
C
codeZlo2018-10-22 15:27:43
Browsers
codeZlo, 2018-10-22 15:27:43

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.

So, is it possible to somehow change this moment so that both sockets and render work clearly even in the background?
I will be grateful for your answer.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Anton, 2018-10-22
@Fragster

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.

A
ar5, 2018-10-22
@ar5

if the library is implemented internally via rAf, then most likely nothing, because it only works on the active tab, you can get around it through the usual listening to socket events and changing your chart data

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question