Как я уничтожил производительность своего блога с помощью 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. Мне пришлось поменять фон так, чтобы сохранить текстуру:

--- a/source/sass/_blog.scss
+++ b/source/sass/_blog.scss
@@ -38,9 +38,7 @@
 @include padded-centered('BlogContent');
 .BlogContent,
 .BlogMore {
-  background: url(/static/images/cork-wallet.png),
-              radial-gradient($slate-sh, $slate-nt);
-  background-blend-mode: hue;
+  background: radial-gradient($slate-sh, $slate-nt);
 }
 .BlogContent {
   position: relative;
@@ -69,8 +67,7 @@
   margin-top: -$overlay;
   margin-bottom: -4rem;

-  background: url(/static/images/cork-wallet.png), white;
-  background-blend-mode: hue;
+  background: url(/static/images/cork-wallet.png);

Теперь в 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. Это потеря для всех нас, режимы наложения сильно упрощают создание красивых страниц с текстурами и градиентами.

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree