🎨 Почему простой список лагает: Скрытый враг FPS (Overdraw)

Бывало такое? Вы сверстали красивый экран, но при скролле он идет рывками, а телефон в руках начинает нагреваться. Вы смотрите в код адаптера, там всё чисто.

Проблема не в коде. Проблема в Overdraw (Перерисовке).

Это когда система вынуждена закрашивать один и тот же пиксель на экране 3-4 раза за один кадр.
Пример: У вас есть белый фон у Activity -> сверху белый фон у Fragment -> сверху белый фон у карточки товара -> сверху картинка.
GPU делает 4 лишних действия, хотя пользователь видит только картинку.

🛠 Как увидеть это своими глазами:

🤖 Android:
Это встроенная суперсила, о которой забывают.

1. Идем в Настройки разработчика (Developer Options).

2. Ищем пункт «Отладка наложения GPU» (Debug GPU overdraw).

3. Выбираем «Показывать зоны наложения».

Ваш экран станет психоделически цветным:

• 💙 Синий: 1 слой (Идеал).

• 💚 Зеленый: 2 слоя (Норма).

• 🩷 Розовый: 3 слоя (Стоит обратить внимание).

• ❤️ Красный: 4+ слоя (Плохо! Тут тормозит).

🍏 iOS: В Xcode:

1. Запустите приложение на устройстве.

2. В меню Xcode: Debug -> View Debugging -> Rendering -> Color Blended Layers.

3. Красные зоны покажут места, где смешиваются прозрачные слои (это самое дорогое для GPU).

🚀 Как лечить:

1. Удаляйте лишние фоны (background). Если у контейнера уже есть белый фон, не нужно ставить такой же белый фон вложенному TextView

2. Избегайте прозрачности (alpha). Для GPU просчитать полупрозрачность сложнее, чем просто сплошной цвет.

3. В списках (RecyclerView/LazyColumn) следите, чтобы элементы не рисовали фон там, где его перекрывает картинка.

💡 Задание: Включите этот режим на телефоне и зайдите в популярные приложения (Telegram, YouTube). Посмотрите, как качественно (или нет) они оптимизированы. А потом зайдите в своё. 😉

Знали про эту настройку или всё это время гадали, почему падает FPS? 👇

#performance #ui #fps #android #ios #optimization #middle

👉 @developer_mobila