Кратко: «jank» — это пропуски кадров, когда отрисовка кадра занимает больше разрешённого бюджета (при $60\text{fps}$ бюджет одного кадра $\approx 16.7\text{ms}$). Ниже — практические техники с пояснениями.
1) Профилирование (что измерять и какие инструменты)
- Что мерить: время кадра, время работы main/UI-потока, layout/measure/draw-вызовы, raster/GPU-время, GC/алокации, задержки I/O и сеть, переборы в списка.
- Инструменты:
- Android: Android Studio Profiler, Systrace / Perfetto, System Traces, GPU Profiler, Layout Inspector, StrictMode.
- iOS: Instruments (Time Profiler, Core Animation, Metal System Trace), Xcode view debugging.
- Web: Chrome DevTools Performance, FPS и Flamecharts, requestAnimationFrame trace.
- Как профилировать: записать сценарий (переходы, скролл), смотреть frame-by-frame, отмечать точки с пиками, использовать trace-события вокруг операций (маркировка критичных блоков). Автоматизировать регрессионные тесты производительности.
2) Минимизировать работу в основном потоке
- Выносить тяжёлую работу в фон: парсинг JSON, декодирование/десериализация изображений, криптография, компоновка данных — в background-пулы или native-вызовы.
- Асинхронные API и очередь приоритетов: использовать non-blocking I/O, Futures/Coroutines/Promises, приоритизировать рендер-важные задачи.
- Time-slicing / incremental work: разбивать большие задачи на чанки и выполнять по несколько миллисекунд за кадр (кооперативная многозадачность).
- Отложенная и ленивое вычисление layout: избегать повторных measure/layout в одном кадре; объединять DOM/View обновления в пакет; использовать дебаунс/коалесцинги изменений.
- Минимизировать аллокации в пути отрисовки: реюз объектов/буферов, пулы, избегать автoboxing и короткоживущих объектов в onDraw/DrawRect.
- Избегать синхронного доступа к диску/сети в UI-потоке; использовать кэширование.
- Использовать frame callbacks (Android Choreographer, iOS CADisplayLink) для координации фоновой работы с кадрами и не начинать тяжёлую работу в середине кадра.
- Аппаратное ускорение: перенос тяжёлых операций в GPU (теневые/анимации) через compositing layers; но промоутировать/демонитировать слои осознанно (обход памяти).
3) Оптимизация рендеринга и layout
- Упрощать view-иерархию/компоненты, использовать flatter layouts, избегать глубокой вложенности.
- Снижать overdraw: делать фон непрозрачным там, где возможно; избегать перекрывающихся полупрозрачных слоёв.
- Избегать дорогих операций в draw: сложных шейдеров, теней через blur, frequent text-measuring.
- Предварительная привязка/мерджинг стилей и атрибутов, использовать diff-рендеринг (виртуальный DOM/immutable models) чтобы минимизировать перерисовки.
4) Lazy-loading ресурсов (картинки, модули, тяжелые компоненты)
- Отложенная загрузка изображений и компонентов: загружать только видимые на экране элементы (windowing/virtualization — RecyclerView/UICollectionView и библиотеки windowing).
- Placeholder / LQIP: сначала показать низкоразрешённую или цветную заливку, затем подменить на полноценную картинку, чтобы не блокировать UI.
- Предзагрузка (prefetch) для ожидаемых переходов, но осторожно с приоритетами и памятью.
- Code-splitting / динамическая подгрузка модулей экрана, чтобы не тащить весь код и ресурсы при старте.
- Lazy inflate/view-stub: не инфлейтить тяжёлые вью, пока они не нужны; инфлейтить в фоне, если возможен.
- Декодирование изображений офф-меня: decode/scale-down в фоне, store bitmap/texture готовыми для GPU.
5) Конкретные практики и контроль
- Целевой бюджет: следить, чтобы основной рендер укладывался в $\approx 16.7\text{ms}$ при $60\text{fps}$.
- Избегать частых forced synchronous layouts (например, запросов размеров сразу после изменений).
- Профилировать аллокации и GC: минимизировать частые сборки мусора и большие паузы.
- Тестировать на медленных устройствах/эмуляции плохой сети.
- Внедрять метрики: измерять p95/p99 времени кадра и отслеживать регрессии.
Краткий чеклист для быстрого применения:
- профилируй реальные сценарии (скролл/переход) и найди горячие точки;
- вынеси парсинг/декодинг/сеть из UI-потока;
- лениво подгружай и декодируй ресурсы, используй placeholders;
- уменьшай сложность view-иерархии и overdraw;
- режь аллокации на путь отрисовки и используешь time-slicing;
- промеряй frame-times и следи за p95/p99.
Если нужно, могу дать checklist-напоминание под конкретную платформу (Android/iOS/Web) или пример профайлинга.