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

Немного теории о css: 

CPU (Central Processing Unit), либо основной процессор — то, что обрабатывает практически все операции, совершаемые ПК.

GPU (Graphics Processing Unit), либо графический процессор — то, что отвечает за обработку графики. GPU был специально разработан для графических вычислений и снимает данную нагрузку с процессора.

Аппаратное ускорение используется для разгрузки центрального процессора. В мире CSS (подробнее тут - edu.cbsystematics.com/ru/courses/description/html-css) все визуальные эффекты обычно псевдо обрабатываются GPU. Фактически реализуется отдельный от веб-страницы слой, на котором происходят отрисовка и обработка анимации. Понимая этот принцип, мы можем улучшить качество отрисовки и производительность. Для этого можно воспользоваться небольшим трюком will-change, о котором и пойдет речь в нашем материале.

Что такое will-change?

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

Способы применения свойства will-change

Качество will-change употребляется, чтоб заблаговременно оповещать браузер о том, каких конфигурации стоит ожидать от элемента. Браузеру крайне необходимо понимать заранее будут ли происходить какие-то трансформации с элементами на страничке. Именно поэтому эффективность использования этого свойства зависит от того, в какой период трансформации вы его будете использовать. Нельзя применить will-change к элементу, который уже изменяется — это бессмысленно. Соответственно использование это свойства принесет максимальную пользу, если будет срабатывать раньше, чем начнутся трансформации. То есть will-change должен срабатывать (добавляться) и отключаться (удаляться) в конкретный момент. Это крайне важно помнить и рассчитывать этот момент заблаговременно. Например, вы хотите, что бы элемент менялся каждый раз, когда на него наводят курсором мышки. Если подключить will-change в начале этого действия, то может произойти утечка памяти. Избежать этого можно с помощью применения will-change, когда родительский элемент переходит в состояние hover. Перешли в hover — сработал will-change.

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

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

Браузеры, которые поддерживают will-change

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

• Chrome 3.6 и выше
• Firefox 3.6 и выше
• Opera 2.4 и выше
• Android браузер 3.7
• Chrome для Android 4.0
• Opera Mobile 2.4

Надеемся вам придется по вкусу новое свойство will-change и ваши сайты станут еще круче.Больше информации о css...