Задача: определить какие элементы интерфейса продуктов Алев и Комета производят к наибольшим performance penalty.

Способ измерения

В браузере chrome можно просмотреть параметры перформанса и параметры композиции слоев. Все измерения производились при помощи этих двух инструментов в chrome. Инструмент Layers позволяет посмотреть композицию слоев рендеринга в 3х мерном пространстве, таким образом можно увидеть какие слои накладываются друг на друга, либо какие слои рендерятся, но при этом не видны. Либо ререндерятся вне области видимости. Инструмент предназначен для поиска проблем с производительностью страниц. Второй инструмент - счетчик FPS, показывает агрегированный результат в виде количества кадров в секунду.

Alev

В ходе изучения обнаружено два проблемных блока:

Jackpots

Внутри этого блока находится слайдер При этом, этот слайдер имеет большое количество отрендеренных offscreen элементов, но что более всего проблемно - у нас сладйер ренедерится в два слоая, видно на скриншоте, что сильно ухудшает перформанс. Хотелось бы чтобы слайды которые не видны не рендерелись, а так же чтобы слайды не были разбиты на несколько плавающих слоев.

Jackpots

Блок джекпоты максимально тяжел для рендеринга, содержит стек под 100 слоев, которые постоянно двигаются и при этом все области видимости (то есть их перестановка вообще никак не влияет на то что видит человек, но перекомпозиция слоев запускается все равно)

Kometa

На комете нет блока с джекпотами, поэтому проблемы в основном доставялет блок с джекпотами, но при этом общий счетчик fps кометы существенно лучше. На иллюстрации видно стек из большого количества невидимых элементов. Оптимальное решение такое же как и на alev, переделать этот блок, чтобы он рендерил меньшее количество элементов как минимум.