В принципе изменений 4 -> 5 каких то критических не было. Единственное что добавилось это translucentBars/Modals, их нужно отключать тогда. Dialog и всё “всплывающее” может тормозить из-за того что под ним. Еще из изменений было то что большинство “серых” цветов шрифтов изменились на rgba цвета, может из-за этого?
Хотелось бы увидеть может какой то минимальный кейс/проект где разница была бы заметна в моб браузере
Позавчера забилдил проект и был сильно удивлён, что лагает удаление строки при стандартном swipeout delete. Расстроился, подумал, что от анимации придётся отказаться. Вечером запустил и обнаружил, что лаги пропали.
Сейчас опять запустил. Лагает
Владимир, спасибо за ответ. Я попробовал воспроизвести это при помощи Framework7-CLI, просто создал проект с Cordova и добавил в левую панель вызов диалогового окна. И там были подтормаживания. После этого я поменял версию фреймворка на 4-ю и диалоговое окно стало работать гораздо плавнее. Я записал видео, не знаю как вставлять прямо в сообщения, поэтому выложил это на ЯД:
П.С. В браузере производительность немного более высокая, чем в приложении. Но в том то и проблема, что в версии 4 подтормаживаний нет вообще даже в приложении.
UPD: я установил mdTouchRipple в false и стало повеселее. Но все равно остается некоторая просадка.
Владимир, у вас получилось найти время? Я думал сам покопаться на выходных/новогодних праздниках, может быть стоит на какие-то места обратить внимание в первую очередь, чтобы уж совсем не тыкать пальцем в небо.
Смотрел, но было немного времени, и отложил тоже до новогодних праздников. Просто что я не пытался делать ни в браузере, ни в телефоне не было таких подтормаживаний. В хроме у меня вообще показывает в 5 версии и fps выше и памяти меньше использует. На счёт куда копать хороший вопрос, но скорее всего в CSS что то, так как в JS логика особо не менялась в этих местах.
В идеале подучить бы кейс в котором даже в десктопное Хроме было бы сильно заметное падение производительности по сравнению с v4, тогда легче будет отследить
У меня это явно увидеть получается только на стареньних не топовых 2-3 летних телефонах, как я на видео показывал. В остальных (даже на новых дешевых Xiaomi по 8-10к рублей) работает хорошо.
В общем попробую как будет время покопаться, поотключать различные куски CSS, потыкаться в инспекторе… Очень уж хочется на 5ю версию перейти.
Дерганое появление диалоговых окон при первом запуске было всегда. Я заметил, что любая анимация при первом проигрывании в приложении замораживается на первом кадре и пропускает несколько кадров, затем все ОК. Браузер помещает растр в память GPU для анимации слоя, возможно это и есть причина такого поведения. В дальнейшем, слой уже находится в GPU и анимация запускается сразу.
В поисках оптимизации, добавляю такие хаки:
отображение контента только после всплытия/появления окна - это можно сделать красиво и элегантно.
проигрывание любой (диалогов, окон, мелких элементов) анимации в фоне при первом запуске приложения - да, это странно выглядит если бы пользователь увидел, но все скрыто за сплэшэм - и затем она запускается без прерывания (все помещается в GPU)
Кривая (animation-timing-function) в CSS скорректирована (зависит от дизайна приложения) для popup-экранов, action sheet: текущая анимация требует больше кадров, соответственно часть из них пропускается (drop) и движение дергается. Более быстрая анимация на входе и медленная на выходе, визуально дает тот же самый эффект (всплытия, подъема), но требует меньшее количество кадров.
На старых устройствах со слабым процессором анимация отключается. Пользователь с таким девайсом рад простой отзывчивости на нажатия, чем дерганой анимации, которая затрудняет работу и занимает время.
Оптимизация отзывчивости кнопок, элементов меню и пр. с active-state, это отключение transition, когда элемент в покое и включение transition с active-state. Это дает визуальный эффект быстрого отклика при нажатии и приятный эффект затухания при отпускании. Увы, ripple отключен везде - он не работает при быстром нажатии или работает с подергиванием и без него гораздо лучше.
Анимация прелоадеров, индикаторов загрузки, прогресс баров, которая предполагает обращение к нативным плагинам, использует только свойства transform или opacity. Эти свойства не зависят от основного рендера страницы и не останавливаются при нагрузке нативного кода или JS.
Если есть свои рецепты производительности, буду рад узнать.
У меня стоит проверка чтобы WebView был не ниже 49-ой версии (в ней появляется поддержка переменных в CSS). Если версия ниже - приложение не загружается, показывается заглушка с предложением обновить WebView с кнопкой ведущей в Google Play.
Касательно вашего второго сообщения - сейчас нет возможности подробно изучить ваш список (он выглядит очень интересным), после выходных надо будет внимательно посмотреть.
Что касается анимации при первом запуске. Пока что все еще остается не отвеченным один (самый первый) вопрос: почему в версии 4 такой проблемы нет…
Попробуй вот это. Проверял наличие в самом начале запуска всего. В одной организации приложение не запускался, на старых телефонах был отключен 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!