По порядку Senior Производительность обновлено
Этапы кадра во Flutter
Вопрос
Расставьте этапы подготовки кадра по порядку.
Попробуйте сами
Расставьте шаги по порядку стрелками.
- 1Rasterize: raster-поток превращает слои в пиксели на GPU
- 2Paint: рендер-объекты записывают команды отрисовки в слои
- 3Анимации: тикеры обновляют значения
- 4Layout: рендер-объекты получают ограничения и вычисляют размеры
- 5Composite: дерево слоёв передаётся движку
- 6Build: перестраиваются грязные элементы
Показать ответ и разбор
Коротко
Кадр начинается с колбэков анимаций, затем идут build, layout и paint на UI-потоке, потом сцена из слоёв отправляется движку, и raster-поток растеризует её на GPU. Поэтому проблема может быть в любом из этапов, и overlay показывает отдельно UI и raster.
Правильный порядок
- 1Анимации: тикеры обновляют значения
- 2Build: перестраиваются грязные элементы
- 3Layout: рендер-объекты получают ограничения и вычисляют размеры
- 4Paint: рендер-объекты записывают команды отрисовки в слои
- 5Composite: дерево слоёв передаётся движку
- 6Rasterize: raster-поток превращает слои в пиксели на GPU
Разбор
Кадр начинается с колбэков анимаций, затем идут build, layout и paint на UI-потоке, потом сцена из слоёв отправляется движку, и raster-поток растеризует её на GPU. Поэтому проблема может быть в любом из этапов, и overlay показывает отдельно UI и raster.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.