V5 framerate drop?

В принципе изменений 4 -> 5 каких то критических не было. Единственное что добавилось это translucentBars/Modals, их нужно отключать тогда. Dialog и всё “всплывающее” может тормозить из-за того что под ним. Еще из изменений было то что большинство “серых” цветов шрифтов изменились на rgba цвета, может из-за этого?

Хотелось бы увидеть может какой то минимальный кейс/проект где разница была бы заметна в моб браузере

Позавчера забилдил проект и был сильно удивлён, что лагает удаление строки при стандартном swipeout delete. Расстроился, подумал, что от анимации придётся отказаться. Вечером запустил и обнаружил, что лаги пропали.
Сейчас опять запустил. Лагает :smiley:

IPhone 8

По сути, один элемент на странице:

Запись экрана:
https://www.icloud.com/iclouddrive/0lHTmvbZRSotNtZ0yaEKsNbAA#ScreenRecording_12-06-2019_12-02-23

Также там видно небольшой баг. Не хватает полоски. Она появляется после скролла.

Владимир, спасибо за ответ. Я попробовал воспроизвести это при помощи Framework7-CLI, просто создал проект с Cordova и добавил в левую панель вызов диалогового окна. И там были подтормаживания. :frowning: После этого я поменял версию фреймворка на 4-ю и диалоговое окно стало работать гораздо плавнее. Я записал видео, не знаю как вставлять прямо в сообщения, поэтому выложил это на ЯД:

v5: https://yadi.sk/i/O9WR85twjmW5HA
v4: https://yadi.sk/i/0iYO0xviVU4PWg

На видео это уже сбилженное приложение.

Вот репозиторий: https://github.com/NikitaKA/f7dialog

Запустил это в браузере. Прикладываю видео. Сначала идет версия v4 (плавно, без подтормаживаний), потом загружается v5.

Видео: https://yadi.sk/i/aO3GOpFldZ6dTA

П.С. В браузере производительность немного более высокая, чем в приложении. Но в том то и проблема, что в версии 4 подтормаживаний нет вообще даже в приложении.

UPD: я установил mdTouchRipple в false и стало повеселее. Но все равно остается некоторая просадка.

У меня аналогично на андроиде, с toast такая же фигня, но увы у меня пока нет времени чтобы выяснить проблему, может у тебя получится

Спасибо, на выходных постараюсь покопать посмотреть

1 Like

Владимир, у вас получилось найти время? Я думал сам покопаться на выходных/новогодних праздниках, может быть стоит на какие-то места обратить внимание в первую очередь, чтобы уж совсем не тыкать пальцем в небо.

Смотрел, но было немного времени, и отложил тоже до новогодних праздников. Просто что я не пытался делать ни в браузере, ни в телефоне не было таких подтормаживаний. В хроме у меня вообще показывает в 5 версии и fps выше и памяти меньше использует. На счёт куда копать хороший вопрос, но скорее всего в CSS что то, так как в JS логика особо не менялась в этих местах.

В идеале подучить бы кейс в котором даже в десктопное Хроме было бы сильно заметное падение производительности по сравнению с v4, тогда легче будет отследить

У меня это явно увидеть получается только на стареньних не топовых 2-3 летних телефонах, как я на видео показывал. В остальных (даже на новых дешевых Xiaomi по 8-10к рублей) работает хорошо.

В общем попробую как будет время покопаться, поотключать различные куски CSS, потыкаться в инспекторе… Очень уж хочется на 5ю версию перейти. :slight_smile:

Привет! На старых устройствах Android нельзя использовать F7/v5, он не поддерживается старыми WebView или я ошибаюсь?

Дерганое появление диалоговых окон при первом запуске было всегда. Я заметил, что любая анимация при первом проигрывании в приложении замораживается на первом кадре и пропускает несколько кадров, затем все ОК. Браузер помещает растр в память GPU для анимации слоя, возможно это и есть причина такого поведения. В дальнейшем, слой уже находится в GPU и анимация запускается сразу.

В поисках оптимизации, добавляю такие хаки:

  • отображение контента только после всплытия/появления окна - это можно сделать красиво и элегантно.
  • проигрывание любой (диалогов, окон, мелких элементов) анимации в фоне при первом запуске приложения - да, это странно выглядит если бы пользователь увидел, но все скрыто за сплэшэм - и затем она запускается без прерывания (все помещается в GPU)
  • Кривая (animation-timing-function) в CSS скорректирована (зависит от дизайна приложения) для popup-экранов, action sheet: текущая анимация требует больше кадров, соответственно часть из них пропускается (drop) и движение дергается. Более быстрая анимация на входе и медленная на выходе, визуально дает тот же самый эффект (всплытия, подъема), но требует меньшее количество кадров.
  • На старых устройствах со слабым процессором анимация отключается. Пользователь с таким девайсом рад простой отзывчивости на нажатия, чем дерганой анимации, которая затрудняет работу и занимает время.
  • Оптимизация отзывчивости кнопок, элементов меню и пр. с active-state, это отключение transition, когда элемент в покое и включение transition с active-state. Это дает визуальный эффект быстрого отклика при нажатии и приятный эффект затухания при отпускании. Увы, ripple отключен везде - он не работает при быстром нажатии или работает с подергиванием и без него гораздо лучше.
  • Анимация прелоадеров, индикаторов загрузки, прогресс баров, которая предполагает обращение к нативным плагинам, использует только свойства transform или opacity. Эти свойства не зависят от основного рендера страницы и не останавливаются при нагрузке нативного кода или JS.

Если есть свои рецепты производительности, буду рад узнать. :+1:

2 Likes

is there a way to easily translate into english for others to be able to follow?

У меня стоит проверка чтобы WebView был не ниже 49-ой версии (в ней появляется поддержка переменных в CSS). Если версия ниже - приложение не загружается, показывается заглушка с предложением обновить WebView с кнопкой ведущей в Google Play.

Касательно вашего второго сообщения - сейчас нет возможности подробно изучить ваш список (он выглядит очень интересным), после выходных надо будет внимательно посмотреть.

Что касается анимации при первом запуске. Пока что все еще остается не отвеченным один (самый первый) вопрос: почему в версии 4 такой проблемы нет…

2 Likes

will-change: transform, opaticy;
Может поможет, примени к анимированyому элементу CSS, сразу рендерит в GPU, должно помочь :slight_smile:

It may help, add to the animated element CSS, immediately render in the GPU, should help :slight_smile:

Поделитесь, как вы определяете версию вебвью?
Есть кстати еще неприятные устройства с необновляемыми вебвью, зашитыми где-то в недрах.

Попробуй вот это. Проверял наличие в самом начале запуска всего. В одной организации приложение не запускался, на старых телефонах был отключен webview. Но точно не помню работает или нет.

я нашел такую конструкцию, которая определяет, поддерживаются ли css custom properties, это собственно то что и нужно, вроде работает и версию вебвью не обязательно знать
this.nativeCSSVars = window.CSS && window.CSS.supports && window.CSS.supports('(--a: 0)');

I’ve tested this issue on new phone (Samsung Galaxy A51) and there still lags/stuttering in dialog opening animation. So I investigated this and found this commit. You removed will-change: transform, opacity;. I added this line from inspector and framerate drop gone!

Could you please bring that line back?

Oh, wow. I actually removed them because they were causing performance issues :slight_smile: Which ones did you add back, for Dialog, Panel?