Як я знищив продуктивність свого блогу з допомогою CSS Background-Blend-Modes

1

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

Я прокрутив сторінку вниз. У Firefox продуктивність скролінгу була просто жахливою:

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

Все вірно, кожна відтворення займала 800ms під час прокручування, а не ті 16,6 ms, необхідні для плавної прокрутки. Що ж сталося? На сайті майже не було 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. Це втрата для всіх нас, режими накладення сильно спрощують створення красивих сторінок з текстурами і градієнтами.