Які CSS-властивості можуть бути оброблені безпосередньо через GPU? Що таке композитні шари й чому їх велика кількість може призвести до аварійного завершення роботи браузера на мобільних пристроях?

Повне пояснення

1. Що це і навіщо – GPU‑прискорені властивості дозволяють виконувати анімації без блокування основного потоку.
2. Ключові принципи – transform, opacity, filter, translate3d; вони не змінюють layout і рендер‑тайм.
3. Як це працює – браузер створює окремий композитний шар, який рендериться GPU‑м; кількість шарів збільшує використання VRAM.
4. Практика – у React/Next.js використовують will-change: transform; або translateZ(0) для підвищення продуктивності.
5. Тестування – DevTools → Performance → Composition; перевірка кількості шарів.
6. Оптимізація – об’єднуйте елементи, уникайте зайвих will-change, використовуйте contain: layout.
7. Безпека – не застосовувати до великих масивів DOM, щоб уникнути OOM‑crash.