ianbrode 28 мая 2015 в 11:20

Оптимизация рендеринга веб-страницы

5 мин

42K

Блог компании Rambler&Co Веб-разработка *CSS *Клиентская оптимизация *HTML *

+40

Комментарии 16

chikuyonok 28 мая 2015 в 12:16

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

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

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

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

Поэтому когда собираетесь выносить что-то на GPU, нужно чётко представлять себе все возможные последствия и уметь правильно пользоваться инструментами для отладки. Я таким образом уже несколько сайтов спас от крэшей на мобильных устройствах :)

+10

НЛО прилетело и опубликовало эту надпись здесь

chikuyonok 28 мая 2015 в 13:26

Вроде через chrome://tracing/ это можно отловить, хотя не так удобно, как через Timeline

claustrofob 28 мая 2015 в 13:04

Поэтому нет никакого «официального» описания как этим правильно пользоваться.

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

chikuyonok 28 мая 2015 в 13:19

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

НЛО прилетело и опубликовало эту надпись здесь

ianbrode 28 мая 2015 в 13:27

Спасибо за дополнение. :)

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

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

TimsTims 28 мая 2015 в 15:20

Оптимизация это конечно хорошо, но ничто не может быть лучше полного отказа от анимации:

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

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

Kuzzy 30 мая 2015 в 01:39

Оптимизация для слабаков, давайте жить в статичном, черно-белом мире, без анимаций :)

Прошу за весь интернет: не отключайте анимации, ибо скучно и занудно!

TimsTims 30 мая 2015 в 08:03

Хотите анимации — смотрите мультфильмы. Но не надо на сайт добавлять крутилки-вертелки, фейерверки. Большинство пользователей будет долго втыкать в интерфейс, вторые будут ждать пока всё отвиснет, так и не поняв что произошло, третие вообще ничего не увидят, т.к. у них браузер в телефоне просто завис. Веб не подходит для нормальной анимации, увы. Даже у того же ютуба слегка подлагивают элементы, а хочется чтобы всё было плавно как в обычных программах

-2

Finesse 26 июл 2015 в 08:16

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