Как я уничтожил производительность своего блога с помощью CSS Background-Blend-Modes

Как я уничтожил производительность своего блога с помощью CSS Background-Blend-Modes

От автора: моя предыдущая статья стала довольно популярной на Reddit. Однако меня заинтриговал комментарий «я написал очень неплохой сайт!». Я сразу же подумал «глупые реддитеры». У меня был лишь google analytics и самописный CSS, я думал, что все будет летать. Но я ошибался.

Я прокрутил страницу вниз. В Firefox производительность скролинга была просто ужасной:

Как я уничтожил производительность своего блога с помощью CSS Background-Blend-Modes

Все верно, каждая отрисовка занимала 800ms во время прокрутки, а не те 16,6ms, необходимые для плавной прокрутки. Что же произошло? На сайте почти не было JS, не было webgl, canvas, пусто! Только самописный CSS и HTML. С точки зрения пользователя все выглядело еще прикольнее.

Удалить 5 строк и получить 60fps???

Затем я попробовал удалить свойство background-blend-mode. Мне пришлось поменять фон так, чтобы сохранить текстуру:

Теперь в Firefox все очень даже хорошо:

Как я уничтожил производительность своего блога с помощью CSS Background-Blend-Modes

Как же так? Как такая небольшая правка подняла fps с 1 до 58?

Я схожу с ума?

Это был баг? Какая-то опасная смесь CSS, которая так понизила производительность? В 2013 году была такая история, когда определенная комбинация свойств box-shadow и border-radius сильно замедляла рендеринг. Я случайно попал под тот самый случай?

Я попробовал найти маленький пример с такими же проблемами с производительностью. В примере ниже используются разные фоны и шаблоны, а в CSS всего 10 строк:

Я даже удалил свойство font-family: sans-serif, чтобы получить красивое число. Прошу прощения!

На самом деле вся эта история говорит о том, что я выбрал реально плохой способ написания кода. Это не какая-то странная комбинация HTML, видео и сложного CSS. Просто свойство background-blend-modes очень сильно тормозит в Firefox.

А что в Chrome?

Да кто его знает! При нагрузочном тестировании в Chrome тоже появлялись белые пустые квадраты во время прокрутки. Но они спроектировали свой профайлер так, чтобы он не показывал средний fps (я так думаю):

Как я уничтожил производительность своего блога с помощью CSS Background-Blend-Modes

И все же, я, как необразованный пользователь, могу заметить, что FPS довольно сильно скачет. Даже Chrome не справляется с режимами наложения.

Усвоенный урок

Эта история научила меня одному – если браузер и поддерживает какую-то функцию, не факт, что ее нужно использовать! Думаю, что background-blend-mode можно поставить в комнату ожидания для новых CSS свойств, туда, где раньше были flexbox, border-radius и :before/ :after. Это потеря для всех нас, режимы наложения сильно упрощают создание красивых страниц с текстурами и градиентами.

Источник: //learntemail.sam.today/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: