Не используй will-change где попало!

В предыдущей статье рассмотрели, как улучшить производительность страницы путём выноса элементов на композитные слои. Теперь рассмотрим недостатки. 

Наверняка, вы встречали совет из заголовка материала, но не задумывались, почему этого не стоит делать. Дело в том, will-change выносит элемент на отдельный композитный слой, а при создании композитного слоя выделяется память на gpu. Когда слоев много, памяти тоже выделяется достаточно. Десктоп может и справится, но вот мобилка нет: в анимации будет заметно моргание или какие-либо артефакты. А может и вообще произойти краш страницы. 

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

• когда имеются дочерние элементы со свойствами transform, opacity
  (меньше 1), mask, filter, reflection;
• когда дочерние элементы скрыты через overflow;
• когда композитный слой перекрывается элементом с большим z-index;
• при 3D-трансформациях (translate3d, translateZ, perspective и  т.д.);
• в анимации transform и opacity через Element.animate(), CSS Transitions, Animations;
• в элементах <video>, <canvas>, <iframe>, <flash> (если помните что такое flash :) );
• когда имеются свойства will-change, position:fixed, filter, backdrop-filter, backface-visibility: hidden.

А иногда браузер вообще выносит всё на один большой слой. В таком случае при изменении одного элемента приходится пересчитывать и остальные. Чтобы разбить всё на несколько слоев, задавайте уникальные translateZ() для элементов (например, translateZ(0.001px), translateZ(0.002px), и так далее).

Только будьте внимательны, в Safari могут быть сюрпризы!