Оптимизация приложения в реальном времени

#1

Всем привет!

Приложение ставки на спорт, проект в реальном времени, вывод дынных( счет, время …).

В приложении есть бегущая строка, в самом низу под мониторами(основным контентом).

Проблема заключаться в чем, когда происходит очень много событий(обновление таймер-ов), и выполняться рендер, строка работает рывками, что можете посоветовать, как оптимизировать??

Ссылка на приложение => https://lsm.favorit.com.ua/livemonitor/?number=1&partnerId=18&cashdeskId=8001

Строка, как найти:

  1. Открыть ссылку выше;

  2. Отдалить масштаб проц. на 50, скриншот строки http://prntscr.com/n6wv0u

Спасибо!

0 Likes

#2

Дрыгания анимированной строки означает что в главном потоке выполнения есть скрипты, которые выполняются дольше чем 16 миллисекунд (это примерно время между отрисовкой кадров экрана при частоте 60 герц), пока эти скрипты выполняются, браузер не может отрисовать новый экран, и мы наблюдаем дрыгающуся анимацию.

Тебе нужно найти с помощью профайлера те моменты из-за которых занимают много времени в главном потоке выполнения. Про профайлер можно почитать тут.

Потом понять почему эти вызовы стоят так много. Там может быть и лишний код и неоптимальный рендер, и реже проблемы с layout-reflow.

Я быстренько запустил профайлер. Есть 1 хороший кандидат для оптимизации:

Большая полоска выполняется 160мс. Это слишком много.

Перфекционист может обратить внимание на полоски поменьше соответственно 25 и 30мс. Левее от большой. Их стоит оптимизировать во вторую очередь.

1 Like

#3

Дима, огромное тебе спасибо!
Спасибо, что дал вектор направления!

1 Like