Will-change: свойство о котором знают немногие

Вы замечали, что иногда какие-то CSS-анимации лагают? Избавиться от них легко, нужно всего лишь добавить одну строку в ваши стили:

will-change

Свойства подсказывает браузеру какие элементы и как будут изменяться. Синтаксис прост:
will-change: свойство, отрисовка которой, вызывает лаги.
То есть, если у вас моросит изменение элемента с помощью transform — пишем will-change: transform.

Что происходит и каким образом браузер избавляется от зависаний?

Всё просто: задача по отрисовке передаётся на видеокарту. Многие, наверное, слышали про аппаратное ускорение и вычисления на GPU. В первое время, после появления биткоином, их, кстати, в основном, добывали на видеокартах. А уже со временем вычисления стали слишком тяжелы и майнеры перешли к более специализированному оборудованию. Впрочем, сейчас не об этом.

Поддержка свойства will-change

Большой поддержкой свойство похвастаться не может. Caniuse показывает, что свойство уже достаточно долгое время поддерживается Chrome, Firefox, Opera. С недавних пор к ним присоединились их младшие версии с Android + стоковый браузер Android.

Но! Отсутствие поддержки других браузеров не мешает нам его использовать. Поддерживающие свойство браузеры будут его использовать, а для остальных можно применить небольшой хак:

transform: translateZ(0)

Использование transform подключает к отрисовке GPU, а значит  анимации обрабатываться будут быстрее и зависания пропадут. В данном же случае никакого изменения блока не происходит, но найдя свойство transform брвузер всё равно подключает видеокарту к отрисовке страницы.

Стоит помнить, что это не панацея. Не стоит прописывать все свойства в значениях will-change. Злоупотребление им может оказать прямо противоположный эффект и в результате страница будет лагать ещё сильнее.

Так же стоит помнить, что нужно стремиться к тому, чтобы анимация не лагала сама по себе. Данное свойство всего лишь вспомогательный инструмент, а не лекарство от кривой вёрстки.

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь