Pull to refresh

Comments 16

У данного подхода, тем не менее, есть отрицательная сторона.

Их гораздо больше :) И если их не учитывать — получим обратный эффект: сильное снижение производительности.

  1. Отдельный GPU-слой почти всегда занимает отдельную память, которую можно посчитать (в байтах) по довольно приблизительной формуле width × height × 4. То есть чем больше слоёв (и чем больше физические размеры слоя), тем больше расход памяти. Неумелым использованием слоёв можно очень быстро вырубить браузер на мобилках.
  2. В Webkit-браузерах (десктоп и мобильные) слой перерисовывается целиком. Это значит, что если где-то внутри слоя поменяется хотя бы один пиксель, браузер сделает repaint всего слоя, а также потратит время на перенос его в GPU. Хотя Blink и научился оптимизировать такие вещи, за этим всё равно нужно следить с помощью описанных в статье инструментов.
  3. Если GPU-слой по z-index будет ниже, то и этот слой тоже будет вынесен на GPU. Со всеми последствиям, описанными выше и с возможными артефактами отрисовки.


Вообще стоит понимать, что GPU-слои (или compositing, как это называется в Blink) — это один большой хак, который сами разработчики браузеров пытаются от нас скрыть и заставить браузер работать так, будто никаких GPU и не-GPU слоёв нет. Поэтому нет никакого «официального» описания как этим правильно пользоваться. Более того, поведение браузеров постоянно меняется: например, Blink далеко не всегда принудительно вынесет слой на GPU даже если ему указать transform: translateZ(0), так он пытается оптимизировать работу с памятью и железом. Иногда это к лучшему, а иногда приходится искать варианты обхода этой оптимизации, чтобы браузер не делал лишний repaint перед анимацией.

Поэтому когда собираетесь выносить что-то на GPU, нужно чётко представлять себе все возможные последствия и уметь правильно пользоваться инструментами для отладки. Я таким образом уже несколько сайтов спас от крэшей на мобильных устройствах :)
UFO landed and left these words here
Вроде через chrome://tracing/ это можно отловить, хотя не так удобно, как через Timeline
Поэтому нет никакого «официального» описания как этим правильно пользоваться.


Вообще-то есть. CSS свойство will-change позволяет сообщить браузеру об изменениях, которые будут применены к элементу.
Да, есть такое свойство. С помощью которого вы всего лишь говорите браузеру «я планирую менять вот такие свойства, оптимизируй это как-нибудь». А как браузер это оптимизирует — вынесет отдельным слоем на GPU, склеит с другими блоками и вынесет отдельным слоем или вообще оставит на основном холсте — вы не знаете. Вы не можете с помощью этого свойства сказать «сразу вынеси этот слой на GPU, потому что потом я буду анимировать кучу блоков и мне не нужен лишний repaint перед стартом анимации; я даю отчёт всем своим действиям и принимаю на себя все возможные риски». Я очень долго на последнем визульано-сложном проекте искал возможность сделать именно так, и никакой will-change тут не помогал. Я пытался именно обойти браузерную оптимизацию и контролировать весь процесс самостоятельно для достижения нужного соотношения производительности и расхода памяти.
UFO landed and left these words here
Спасибо за дополнение. :)

GPU-слои (или compositing, как это называется в Blink) — это один большой хак


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

-Если изображение (в нашем случае веб-страница) не успевает отрисоваться
Значит нафиг не надо использовать такую анимацию. не мучайте пользователя, не садите ему аккумулятор лишними расчетами. Большинство устройств, под которые вы оптимизируете код «чтобы везде работало» и так слишком слабые, чтобы отображать такую веб-анимацию. Как не оптимизируй, а всегда найдется более слабое устройство, на котором «будет тормозить». А на устройствах которые достаточно мощные для анимации — они даже и не почувствуют была ли тут оптимизация, или нет.

Прошу за весь интернет: отключайте анимации! Уговаривайте руководство отказаться от анимации, Приводите доводы, Показывайте на разных устройствах (не только на айфонах 6). Если хоть где-то тормозит, то это будет минус х10 ваших потенциальных пользователей. Фух накипело… яркий пример «крутой анимации» — сайт альфы(на хабре уже обсуждали) alfabank.ru
Оптимизация для слабаков, давайте жить в статичном, черно-белом мире, без анимаций :)

Прошу за весь интернет: не отключайте анимации, ибо скучно и занудно!
Хотите анимации — смотрите мультфильмы. Но не надо на сайт добавлять крутилки-вертелки, фейерверки. Большинство пользователей будет долго втыкать в интерфейс, вторые будут ждать пока всё отвиснет, так и не поняв что произошло, третие вообще ничего не увидят, т.к. у них браузер в телефоне просто завис. Веб не подходит для нормальной анимации, увы. Даже у того же ютуба слегка подлагивают элементы, а хочется чтобы всё было плавно как в обычных программах
Смотря какой ресурс. Если нужно произвести вау-эффект, то анимации необходимы, а во всех остальных случаях лаги из-за и вылетания анимаций мешают пользоваться сайтом по назначению: получать информацию.
У автора опечатка в коде статьи:
translate: transform3d…
вместо
transform: translate3d
Как прекрасно, что есть Firefox и NoScript.
UFO landed and left these words here
Как хорошо, что мало кто умеет делать css-анимации :)
UFO landed and left these words here
Only those users with full accounts are able to leave comments. Log in, please.