Задержка Render VUE.JS. Как избежать?

Question

[codeZlo]

Здравствуйте!

Суть такова. На Vue.js есть render, который рисует график на canvas каждые 100 миллисекунд. Когда вкладка активна, то всё ок. Когда же вкладка не активна какое-то время (всегда по-разному), то при переключении на эту вкладку render начинает выполняться не каждые 100 миллисекунд, а каждые рандомное количество миллисекунд. Складывается ощущение, что всё виснет. Приходится либо ждать какое-то продолжительное время, либо просто обновлять страницу. Отмечу, что ещё на сайте есть сокеты, но с ними вроде всё ок в это время.

Известен такой факт:

Большинство браузеров (десктопных в первую очередь) продолжают выполнять setTimeout/setInterval, даже если вкладка неактивна.

При этом ряд из них (Chrome, FF, IE10) снижают минимальную частоту таймера, до 1 раза в секунду. Получается, что в «фоновой» вкладке будет срабатывать таймер, но редко.

При работе от батареи, в ноутбуке – браузеры тоже могут снижать частоту, чтобы реже выполнять код и экономить заряд батареи. Особенно этим известен IE. Снижение может достигать нескольких раз, в зависимости от настроек.

Так вот, возможно ли как-то изменить этот момент, чтобы даже в фоном режиме работало четко и сокеты и render?

Буду признателен за ваш ответ.

Answer 1

[Антон Антон]

А вот если бы вместо этого рисовали бы svg как обычный vue компонент с реактивностью, то никаких проблем бы не было. Вообще использовать set timeout вместо request animation frame странно в 2k18.

Comments

[codeZlo]

Вы имеете в виду использовать, к примеру, gionkunz.github.io/chartist-js/index.html и изменять график по запросу от сервера?

[Антон Антон]

codeZlo, ну у меня простые графики были, типа таких:

я прям svg в коде прописал, без библиотек:

spoiler

<template>
  <svg style="width: 100%" viewBox="0 0 800 400">
    <!-- выходные и предпраздничные -->
    <g :width="width" :height="height">
      <rect v-for="day in calendarData" :x="day.x-day1*0.5" :y="0" :width="day1" :height="height" :class="day.type" :key="day.x"/>
    </g>

    <!-- обед -->
    <g :width="width" :height="height">
      <rect :x="0" :y="(13 - hourMM.min + 1)*hour1" :width="width" :height="hour1" class="dinner"/>
    </g>

    <!-- линии часов -->
    <g :width="width" :height="height">
      <line v-for="hour in hours" :y1="hour.y" x1="1" :y2="hour.y" x2="800" class="hour" :key="hour.y"/>
    </g>
    <g :width="width" :height="height">
      <line v-for="line in dayBorders" :y1="line" x1="1" :y2="line" x2="800" class="day-border" :key="line"/>
    </g>

    <!-- метки дней и часов -->
    <g :width="width" :height="height">
      <text v-for="day in days" text-anchor="middle" :y="14" :x="day.x" :key="day.x">{{day.text}}</text>
    </g>
    <g :width="width" :height="height">
      <text v-for="hour in hours" :y="hour.y-3" x="3" :key="hour.y">{{hour.text}}</text>
    </g>

    <!-- данные -->
    <g :width="width" :height="height">
      <rect v-for="line in displayedData" :x="line.x1-day1*0.32" :y="line.y1" :width="day1*0.64" :height="line.y2-line.y1" class="data" :key="line.x1"/>
    </g>
    <!---->
  </svg>
</template>

А сами данные да, обновлять только когда они реально изменились (и через реактивность график сам обновится).

[codeZlo]

Антон Антон, а если изменение данных это определенный алгоритм, к примеру, математическая функция y = Xˆ2, где икс это секунды с начала включения этой функции. Она выполняется и на сервере и на клиенте. Необходимая точность для клиента это 0.01 от Y. Как менять график без setTimeout?
Я просто правда не понимаю.

[Антон Антон]

codeZlo, использовать request animation frame, генерировать "предсказанные данные" за прошедшее между срабатыванием время (не по одной точке за раз, а наборами в зависимости от количества квантов). при получении данных с сервера (тут можно использовать таймаут или вебсокеты) заменять предсказанные данные на реальные. Ну а дальше их можно выводить, либо через реактивность в svg, либо через рендер на канвас. что будет быстрее - не знаю, но именно для канваса использовать vue совсем не обязательно - он каждый раз генерится с нуля и реактивность там не нужна.

[codeZlo]

Антон Антон, проблема в том, что setInterval работает каждые 100 миллисекнд. Передавать с сервера 100+ клиентам в данном случае посредством сокета данные каждые 100 миллисекунд слишком тяжело. На данный момент видим единственный выход это Web Worker привязать к Vue.js. Что думаете на счет Web Worker?

[Антон Антон]

codeZlo, так не надо с сервера так часто передавать. на клиенте прогнозируйте. web worker работает. но смысл не в том, чтобы отрабатывать ровно каждые 100 мс, а отрабатывать раз в определенный промежуток, смотреть, сколько "тиков" прошло и генерить данные для этого промежутка времени.

Answer 2

[ar5]

если внутри библиотека реализована через rAf, то скорее всего никак, потому что он работает только на активной вкладке, можно обойти через обычное прослушивание событий сокетов и изменение данных вашего графика