в начале было MVP
вот стооооолько
анимаций хочу
ctrl C + ctrl V
ctrl C + ctrl V понять базовый принцип
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
Application
Run Loop UIKit
Event
queue
Application
Run Loop UIKit
Core
Animation
iOS
Port
Application
Run Loop UIKit
Core
Animation
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
60 Гц
частота обновлений у большинства устройств
1 сек
60 обновлений
кадр 1
16,67 ms
кадр 2 кадр 3 кадр 4 кадр 5
16,67 ms
VSYNC сообщает, когда экран нужно обновить
кадр 1 кадр 2 кадр 3 кадр 4 кадр 5
App
Render
server
On the
display
The Render Loop
3 стадии
16,67 ms
iOS
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
iOS
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
App
Render
server
On the
display
Event
The Render Loop
Event
The Render Loop
Commit
iOS
Render
server
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
Render
server
iOS
Render
server
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
App
Render
server
On the
display
Event
The Render Loop
Commit Render prepare Render execute
Render
server
iOS
Render
server
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
App
Render
server
On the
display
Event Commit
The Render Loop
Render prepare Display
Render execute
Render
server
App
Render
server
On the
display
Event Commit Render prepare Display
Render execute
The Render Loop
iOS
Render
server
Port Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
Render
server
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
iOS
Render
server
iOS
Port
Event
queue
Application
Run Loop UIKit
Core
Animation
CATransaction.begin()
CATransaction.commit()
iOS
Render
server
Hitch!!!
Hitch!!!
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
кадр 1
16,67 ms
кадр 1 кадр 2
кадр 1 кадр 2 кадр 3
кадр 1 кадр 2 кадр 3
кадр 1 кадр 2 кадр 3 кадр 4
Commit hitch
Commit hitch Rendering hitch
Commit hitch
App
Render
server
On the
display
кадр 1 кадр 2 кадр 3
ожидалось здесь
кадр 4
Commit hitch
App
Render
server
On the
display
кадр 1 кадр 2 кадр 3
ожидалось здесь
кадр 4
через 16,67 ms
Commit hitch
App
Render
server
On the
display
кадр 1 кадр 2 кадр 3
ожидалось здесь через 33,34 ms
Commit phase
Layout
Display
Prepare
Commit
Commit phase
Layout
Display
Prepare
Commit
Добавление или удаление views
frame, bounds, transform
setNeedsLayout()
Commit phase
Layout
Display
Prepare
Commit
Добавление или удаление views
frame, bounds, transform
setNeedsLayout()
Добавление или удаление views
frame, bounds, transform
setNeedsLayout()
Commit phase
Layout
Display
Prepare
Commit
UI Window UI View UI View UI View
из констрейнтов составляются системы линейных уравнений
и вычисляются фреймы для всех вью в иерархии
Auto Layout
UI Window UI View UI View UI View
Оптимизация Auto Layout
Одновременное добавление
ограничений
Оптимизация Auto Layout
Одновременное добавление
ограничений
Скрывать вью
вместо удаления
Оптимизация Auto Layout
Одновременное добавление
ограничений
Скрывать вью
вместо удаления
Изменение константы
констрейнтов
Оптимизация Auto Layout
Одновременное добавление
ограничений
Скрывать вью
вместо удаления
Изменение константы
констрейнтов
Управление приоритетом
Оптимизация трансформаций
transform
Оптимизация трансформаций
transform transform3D
Оптимизация трансформаций
transform transform3D
draw(rect:)
setNeedsDisplay()
Commit phase
Layout
Display
Prepare
Commit
draw(rect:)
setNeedsDisplay()
Commit phase
Layout
Display
Prepare
Commit
Асинхронное рисование
Асинхронное рисование
Происходит декомпрессия
и масштабирование изображений Commit phase
Layout
Display
Prepare
Commit
iOS 15
iOS 15
До iOS 15
PDF или PNG?
PDF или PNG?
1. Если картинка всегда одного размера - PNG
PDF или PNG?
1. Если картинка всегда одного размера - PNG
2. Если картинка скейлится - PDF
CATiledLayer
Упаковка layer tree
Отправка его на render server
Commit phase
Layout
Display
Prepare
Commit
Упаковка layer tree
Отправка его на render server
Commit phase
Layout
Display
Prepare
Commit
App
Render
server
On the
display
ожидалось здесь
Render hitch
кадр 2
кадр 1 кадр 4
кадр 3
App
Render
server
On the
display
ожидалось здесь через 16,67 ms
Render hitch
кадр 2
кадр 1 кадр 4
кадр 3
Root
Shadow Core Animation is Fun
Render prepare
Root
Shadow Core Animation is Fun
Render prepare
Shadow Core Animation is Fun
Root
Shadow Core Animation is Fun
Render prepare
Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Shadow Core Animation is Fun
Core Animation is Fun
Offscreen rendering
Offscreen rendering
Shadow
Offscreen rendering
Shadow
Mask
Offscreen rendering
Shadow
Visual Effect
Mask
Offscreen rendering
Shadow
Visual Effect
Corner radius (+clipToBounds)
Mask
Offscreen rendering
Offscreen rendering
Offscreen rendering
Color blending
Color blending
Color blending
Opacity
Color blending
Color blending
Opacity
Corner radius
Color blending
Opacity
Corner radius
Color blending
Opacity
Corner radius
Color blending
Универсальные решения
shouldRasterize
Универсальные решения
shouldRasterize готовые картинки
Пара слов про списки
reuse cell
Пара слов про списки
reuse cell
hitch
Пара слов про списки
reuse cell
hitch
prefetching cell use prefetched cell
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
16,67 ms
16,67 ms
Hitch!!!
16,67 ms
Hitch!!!
Hitch!!!
16,67 ms
Hitch!!!
Hitch!!!
16,67 ms
gap
16,67 ms
gap
CADisplayLink
ПЛАН
Hitches
как работает
UI
Instruments
как устроено
приложение
1 2 3 4
Итоги
5
Подведем итоги
CPU
Layout
Display
Картинки
Подведем итоги
CPU
Layout
Display
Картинки
GPU
Offscreen rendering
Color blending
Подведем итоги
CPU
Layout
Display
Картинки
GPU
Offscreen rendering
Color blending
Run Loop
GCD
ОТ MVP
К СЛОЖНЫМ
ИНТЕРФЕЙСАМ
Саша Лис
@dev_lis

Podlodka i os crew 8