Hi! I’m working on migration of my app from v4 to v5 and found that application now working slower than before. I didn’t change anything in my components, styles, etc. Same code, but different versions, v4 replaced with v5.
Framerate drop occur when (especially) opening/closing dialogs and swiping panel. Some other transitions works with freezes too, app subjectively began to work slower. After moving back to v4 - everything goes fine again.
This issue is noticeable on old devices. I tested it on Samsung A5 (2017) (Android 8.0) and iPhone 5s (iOS 10.3).
I disabled iOS translucent bars/modals, but that didn’t help.
Основная проблема, которая беспокоит - это дерганное появление диалоговых окон, это очень сильно бросается в глаза. В версии 4 такой проблемы нет. Значит дело разнице между 4 и 5 версиями, и скорее всего в в анимациях, согласны? Вот я и хочу узнать, были ли какие-то изменения в них, может быть это можно исправить CSS правилом, скопированным из 4-ой версии.
П.С. Устройства как правило ведут себя странно когда речь идет о ПО, но говорить о системном WebView, который один и тот же, но на разных версиях фреймворка работает с разной производительностью, я бы не стал. У меня установлены два приложения, одно собрано с v4, другое с v5. Оба запущены, я переключаюсь между ними и вижу, что в v5 диалоговые окна тормозят. WebView очевидно тут не причем.
П.С.С. Отключение анимации затронет ВСЕ устройства (городить огород с определением версии iOS и Android не хотелось бы, тем более что есть телефоны, которые имеют старые версии Android но при этом гораздо более производительные). Это не вариант.
Хочу еще уточнить момент: на iPhone 5s нет проблемы с диалоговыми окнами, на нем менее выражены проблемы с производительностью. Больше это касается Андроида.
Не согласен, может там проблема в чем-то другом. Но что внутри знает только Владимир.
Все зависит от версии Андроида / iOS, от оболочки (для Андроида) и от конкретного девайса. Все может работать по разному. На своем опыте имею огромное количество “разного поведения” на казалось бы “одинаковых устройствах”.
Единого кода в разработке даже под Cordova нет в больших проектах, это норма подстраиваться под устройства. Вот слабые, детектить да, проблема, но можно придумывать всякие “фишки” для детекта: но для этого нужно время и желание разбираться.
По хорошему, это уже старье (и девайс и версия), вы думаете что делая под Cordova сможете охватить все устройства? В нативе iOS общая практика - это поддерживать текущую версию iOS и предыдущую, остальное уже “дополнительное время - дополнительны деньги”. Это как говорить, что F7 не работает в IE
Я написал выше, что отключение не вариант, обосновал этот довод, но вы как будто троллите меня. Повторюсь: отключение анимации повлияет на все другие устройства. Может быть вы предложите как определять процессор и кол-во памяти на устройстве, и на основе этого выключать анимацию? Тогда это будет иметь смысл.
Что касается вашего несогласия с тем, что системное WebView одинаково в двух одинаковых приложениях, но с разными версиями Framework7. Специально провел эксперимент и запустил приложения не в Cordova, а запустил dev-сервер и открыл их в браузере Chrome (именно его WebView используется как системное): результат тот же, в версии v5 появление диалоговых окон сопровождается просадкой FPS. У вас есть какие-нибудь предположения на этот счет?
Касательно всего остального, у меня большой опыт, я прекрасно все это знаю и понимаю. Вопрос был конкретен: были ли какие-то изменения в v5 в отношении анимаций. Потому что прежде чем городить костыли и фишечки, нужно сначала выяснить источник этой проблемы. Вы же предлагаете мне отрезать руки всем, потому что у меня болит палец.
Вижу такие варианты: 1) выяснить про изменения, 2) при невозможности это исправить - вернуться на 4-ю версию.
вы думаете что делая под Cordova сможете охватить все устройства?
Да, на данный момент я охватываю все устройства от iOS 10.3 и Android 5.1 (запускал на тест, работало, но нижнюю границу поставили 7-ой версией). Фаталы в appMetrika и Sentry есть, но они редкие.
В версии v5 фреймворка появились тормоза в некоторых местах. Вариант у меня остаться на v4 и все.
В нативе iOS общая практика - это поддерживать текущую версию iOS и предыдущую
В моем случае эта практика не подходит. Если приложение является частью бизнеса (крупного), то требования гораздо более жесткие, всегда есть люди, которые не обновляют телефоны. Статистика по устройствам показывает, что с каждой сотней км за МКАД кол-во “старья” растет. Apple нам говорит, что 7% юзеров осталось на iOS 11 и 5% на более старой прошивке. Имеем 12 человек на 100, которые под вашу общую практику не попадают.
В принципе изменений 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.
Если есть свои рецепты производительности, буду рад узнать.
После этого я поменял версию фреймворка на 4-ю и диалоговое окно стало работать гораздо плавнее. Я записал видео, не знаю как вставлять прямо в сообщения, поэтому выложил это на ЯД:
