Статьи

Введение в свойство CSS will-change

Ноябрь 23, 2018

В этой статье мы рассмотрим свойство CSS will-change , что это такое, когда и как его использовать, и как его не использовать. В отношении will-change Эта статья будет служить кратким обзором важных частей с некоторыми быстрыми примерами.

Некоторый Фон

Сегодня многие разработчики внешних интерфейсов используют CSS3-переходы, преобразования и анимации, чтобы добавить новый уровень интерактивности приложений, который ранее оставался в библиотеках JavaScript или Flash. Теперь мы можем выполнять плавную и красивую анимацию с минимальным CSS. Если вы экспериментировали и использовали эти свойства CSS3, вы, скорее всего, сталкивались с терминами CPU, GPU и аппаратное ускорение. Давайте разберем эти термины быстро:

  1. Центральный процессор или центральный процессор — это аппаратное обеспечение, которое обрабатывает практически все операции компьютера. Это иначе известно как материнская плата.
  2. Графический процессор, или графический процессор, представляет собой аппаратное обеспечение, связанное с обработкой и рендерингом графики. Графический процессор предназначен для выполнения сложных графических вычислений и освобождает процессор от серьезной нагрузки.
  3. Аппаратное ускорение — это общий термин для разгрузки процессов ЦП на другую выделенную часть оборудования. В мире CSS-переходов, преобразований и анимаций это означает, что мы переносим процесс на графический процессор и, следовательно, ускоряем его. Это происходит путем перемещения элемента на собственный слой, где он может отображаться независимо во время анимации.

Как это улучшает производительность и качество анимации? Ну, во-первых, в браузерах на основе WebKit мы часто можем видеть мерцание при выполнении некоторых операций CSS, а именно 2D-преобразований и анимаций. В прошлом мы обходились без этого, обманывая браузер. Мы бы сделали браузер таким, чтобы он выполнял трехмерное преобразование, таким образом перенося операцию на графический процессор. Это потому, что 3D-преобразования автоматически перемещаются туда. Это приводит нас к такой хитрости: 

 .accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

Есть несколько подобных трюков, но по большей части это касается нас. Тем не менее, это хак, и именно здесь свойство воли will-change Давайте исследуем.

Что will-change

Согласно проекту редактора W3C :

CSS-свойство will-change Это позволяет агенту UA заранее оптимизировать обработку элемента, выполняя потенциально дорогостоящую работу по подготовке анимации до ее фактического запуска.

Это означает, что вместо того, чтобы принудительно преобразовывать наши преобразования в графический процессор посредством взлома 3D-преобразования, теперь мы можем использовать выделенное свойство, чтобы информировать браузер о необходимости следить за изменениями в будущем и соответственно оптимизировать и распределять память. Звучит довольно аккуратно, правда? Прежде чем мы все будем взволнованы, мы должны понять, как использовать will-change

Как используется will-change

Свойство will-change Мы не можем применить что-то вроде will-change: transform Сара Соуэйдан обсуждает это фантастически подробно в блоге Opera , так что не забудьте проверить это, но ключевые моменты, на которые следует обратить внимание:

  1. Мы заинтересованы в том, чтобы использовать это свойство, чтобы браузер заранее знал, какие изменения можно ожидать от элемента.
  2. Это позволяет браузеру заранее выполнить надлежащую оптимизацию, что в конечном итоге приводит к более быстрой и быстрой обработке.
  3. Как упоминалось ранее, браузер должен заранее знать, какие изменения произойдут. Это означает, что мы должны заранее подумать, когда подготовить браузер к изменениям.

Учитывая вышесказанное, давайте рассмотрим пример, который не будет иметь никакого эффекта: 

 .will-change:active {
  will-change: transform;
  transition: transform 0.3s;
  transform: scale(1.5);
}

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

Чтобы элемент достиг active Затем мы можем сделать что-то вроде этого: 

 .will-change {
  transition: transform 0.3s;
}

.will-change:hover {
  will-change: transform;
}

.will-change:active {
  transform: scale(1.5);
}

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

Браузеры по своей природе стараются изо всех сил оптимизировать и быть готовыми к изменениям. Браузеры удалят определенные оптимизации как можно скорее, чтобы освободить память. Использование свойства will-change Это заставляет браузер поддерживать оптимизацию, увеличивая тем самым потребление памяти. Имея это в виду, мы должны иметь возможность добавлять и удалять свойство will-change Первый пример делает это для нас, потому что свойство будет добавлено только при наведении курсора. Но что, если мы хотим, чтобы преобразование действительно происходило при наведении? У вас может возникнуть соблазн сделать это: 

 .will-change {
  will-change: transform;
  transition: transform 0.3s;
}

.will-change:hover {
  transform: scale(1.5);
}

Это приведет к увеличению потребления памяти, потому что мы заставляем браузер думать, что элемент близок к постоянному изменению. Мы можем обойти это, вместо этого ища событие hover в родительском контейнере: 

 .will-change-parent:hover .will-change {
  will-change: transform;
}

.will-change {
  transition: transform 0.3s;
}

.will-change:hover {
  transform: scale(1.5);
}

Это добавляет оптимизацию, когда мышь входит в родительский контейнер, и удаляет ее, когда мышь уходит. Однако это также означает, что каждый раз, когда мышь входит в родительский контейнер, браузер может ожидать изменения элемента. Это не обязательно так, и представляет собой совершенно четкий пример того, как легко злоупотреблять этим свойством.

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

 .slide {
  will-change: transform;
}

Всегда удаляй will-change

Не забывайте удалять свойство will-change Как я упоминал выше, оптимизация браузера является дорогостоящим процессом, поэтому при плохом использовании они могут иметь неблагоприятные последствия. Мы можем справиться с этим с помощью JavaScript, и мы будем ссылаться на скрипт из MDN для построения грубого примера. Представьте, что у нас есть элемент с классом element Наш CSS может выглядеть так: 

 .element {
  transition: transform 0.5s;
}

.element.clicked {
  transform: scale(1.5);
}

Если мы хотим уведомить браузер о подготовке оптимизации для изменения, которое должно произойти в ответ на щелчок по элементу, мы можем сделать что-то вроде этого: 

 var el = document.querySelector('.element');

el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  this.style.willChange = 'transform';
}

function removeHint() {
  this.style.willChange = 'auto';
}

Конечно, вам нужно будет включить необходимый JavaScript для добавления правильного класса, по clicked Когда мышь входит в элемент, добавляется свойство will-change Когда он щелкает и происходит преобразование (с помощью соответствующего сценария), события анимации будут отправляться. В animationEndwill-change

Поддержка браузера

Свойство will-changeМожно ли использовать» :

  • Chrome 36 и выше
  • Firefox 36 и выше
  • Опера 24 и выше
  • Android-браузер 37
  • Chrome для Android 40
  • Opera Mobile 24

Internet Explorer является единственным существенным отсутствующим браузером, и will-changeвнесены в список рассматриваемых на момент написания статьи.

Заключительные замечания и источники

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

Есть несколько статей, в которых подробно рассматриваются аппаратное ускорение и свойство will-change Я рекомендую ознакомиться с ними, чтобы укрепить ваше понимание этого зонтика CSS.

44
Share: