Владимир Шедько — Плавный скролл для нагруженного UI

Transcript

1. Ozon Tech 2022 Плавный скролл для нагруженного UI
2. • Сформулируем проблему • Выявим ее причины • Определим метрики для оценки результата • Рассмотрим несколько решений • Сравним результаты План
3. Проблема
4. Пользователь сталкивается с торможением при скролле экранов Проблема
5. Почему тормозит скролл? * Частота обновления экрана 60 Hz
6. • Не оптимально написаны компоненты, используемые внутри ViewHolder’а Какую «лишнюю» работу мы делаем на UI потоке? • Много изменений ViewHolder’а в методе onBindViewHolder
7. Найди десять отличий
8. В процессе разработки • Android profiler • Perfetto Инструменты для замеров производительности После релиза • FPS tracker
9. Метрика для оценки результата Hitch rate = Hitch time Scroll time
10. • Переписать все на custom view, canvas, compose • Использовать общие пулы для вложенных во ViewHolder элементов • Мультикадровый bind • Bind в отдельном потоке Варианты решения проблемы
11. Мультикадровый bind
12. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
13. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
14. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
15. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
16. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
17. Как должно работать? • Заполнение ViewHolder’а происходит за несколько кадров • Пользователь не видит частично заполненный ViewHolder
18. Почему это поможет?
19. Последовательность действий
20. Включение extra space в RecyclerView
21. Ожидание следующего кадра
22. Уведомление о видимости ViewHolder’а
23. Добавляем мультикадровый bind в ViewHolder
24. Результаты
25. Плюсы • Нет негативного влияния на UI • Нет необходимости переписывать вложенные во ViewHolder компоненты • Нет проблем с многопоточностью Плюсы и минусы решения Минусы • Разработчики вынуждены «на глаз» разделять bind на шаги • Время мультикадрового bind’а ограничено скроллингом через extra space
26. Bind в отдельном потоке
27. • Во время заполнения пользователь может видеть плейсхолдер • Размеры плейсхолдеров должны совпадать с размером контента • Заполнение ViewHolder’а происходит вне UI потока Как должно работать?
28. Последовательность действий
29. Разделение логики внутри ViewHolder’а
30. Расчет размеров ячейки
31. Интерфейс для ViewHolder’а
32. Расчет размеров
33. Передача списка для расчёта размеров ячеек
34. Результаты (Hitch rate, %) 5 3 1 Синхронный bind Мультикадровый bind Bind на отдельном потоке
35. Сравнение решений Критерий Мультикадровый bind Bind на отдельном потоке Ограничение на время bind’а Да Нет Стабильность Hitch rate Средняя Высокая Проблемы с многопоточность Нет Да Плейсхолдеры Нет Да «Двойной» bind Нет Да Сложность реализации Средняя Высокая Требуется редактирование вложенных компонентов Нет Частично Нitch rate Средний Низкий
36. vshedko@ozon.ru Спасибо за внимание Владимир Шедько, ведущий разработчик