will-change
Свойства подсказывает браузеру какие элементы и как будут изменяться. Синтаксис прост:
will-change: свойство, отрисовка которой, вызывает лаги.То есть, если у вас тормозит изменение элемента с помощью transform — пишем will-change: transform.
Что происходит и каким образом браузер избавляется от зависаний?
Всё просто: задача по отрисовке передаётся на видеокарту. Многие, наверное, слышали про аппаратное ускорение и вычисления на GPU. В первое время, после появления биткоином, их, кстати, в основном, добывали на видеокартах. А уже со временем вычисления стали слишком тяжелы и майнеры перешли к более специализированному оборудованию. Впрочем, сейчас не об этом.
Поддержка свойства will-change
Caniuse показывает, что свойство уже поддерживает 91% браузеров.
Но! Отсутствие поддержки других браузеров не мешает нам его использовать. Поддерживающие свойство браузеры будут его использовать, а для остальных можно применить небольшой хак:
transform: translateZ(0)
Использование transform подключает к отрисовке GPU, а значит анимации обрабатываться будут быстрее и зависания пропадут. В данном же случае никакого изменения блока не происходит, но найдя свойство transform брfузер всё равно подключает видеокарту к отрисовке страницы.
Стоит помнить, что это не панацея. Не стоит прописывать все свойства в значениях will-change. Злоупотребление им может оказать прямо противоположный эффект и в результате страница будет лагать ещё сильнее.
Так же стоит помнить, что нужно стремиться к тому, чтобы анимация не лагала сама по себе. Данное свойство всего лишь вспомогательный инструмент, а не лекарство от кривой вёрстки.
Поделиться