Что это: Встроенный в браузер набор инструментов для диагностики приложения (МРТ для кода).
Суть: Позволяет найти "узкие места" в скорости работы и памяти. Главные враги — это Jank (пропуск кадров, когда рендер занимает больше 16мс) и Memory Leak (утечки памяти).
Как работает:
➤ Вкладка Performance: Показывает график кадров (UI thread и Raster thread). Красные полосы = лаги.
➤ Вкладка Memory: Делает "снимки" (heap snapshot) объектов в оперативной памяти.
Для чего: Если список тормозит при скролле, DevTools покажет, какая именно функция грузит процессор.
Что это: Виджет, который создает отдельный слой отрисовки.
Суть: По умолчанию, если на экране крутится маленький лоадер, Flutter может перерисовывать весь экран целиком 60 раз в секунду. Это бьет по батарее и CPU.
Как работает: Мы оборачиваем тяжелую анимацию в RepaintBoundary. Flutter делает из нее "картинку" (Texture) и перерисовывает только эту текстуру, не трогая остальной фон.
Для чего: Изоляция постоянно меняющихся элементов (gif-анимации, таймеры, видеоплееры) от статического UI.
Что это: Правильная работа с декодированием картинок в память.
Суть: Картинка 4K весит 5 МБ на диске. Но когда она загружается в оперативную память (декодируется в пиксели), она может сожрать 100 МБ. Если у тебя в списке 20 таких картинок — приложение упадет с ошибкой Out Of Memory (OOM).
Как работает: У виджета Image.network или Image.asset есть параметры cacheWidth и cacheHeight.
Пример: Ты выводишь аватарку 50x50. Задаем cacheWidth: 150. Flutter обрежет картинку до того, как засунет ее в оперативную память.
Что это: Низкоуровневые движки (на C++), которые физически закрашивают пиксели на экране.
Суть:
➤ Skia (Старый): Компилировал графические шейдеры "на лету" прямо во время анимации. Это вызывало знаменитую проблему Shader Compilation Jank (сильные рывки при первом запуске анимации).
➤ Impeller (Новый): Решил эту проблему. Он прекомпилирует все шейдеры заранее, при сборке приложения.
Для чего: Знать это нужно, чтобы отвечать на вопрос "Почему мое приложение на iOS дергается при первом открытии экрана?".
В: Как найти утечку памяти (Memory Leak)?
О: Открываю DevTools (Memory). Делаю снимок памяти. Захожу на проблемный экран. Выхожу с него. Делаю второй снимок. Если объекты с этого экрана остались в памяти — это утечка (например, забыл вызвать dispose() у контроллера).
В: Что такое UI thread и Raster thread?
О: UI thread (Dart-код) считает, ГДЕ должны быть виджеты. Raster thread (C++ движок) физически КРАСИТ пиксели на экране. Лагать может и тот, и другой.
В: Почему ListView лагает при скролле?
О: 1. Не используют ListView.builder. 2. Картинки грузятся без cacheWidth. 3. Не задан itemExtent (если элементы одинаковой высоты, указание высоты ускоряет скролл в разы).