От автора: моя предыдущая статья стала довольно популярной на Reddit. Однако меня заинтриговал комментарий «я написал очень неплохой сайт!». Я сразу же подумал «глупые реддитеры». У меня был лишь google analytics и самописный CSS, я думал, что все будет летать. Но я ошибался.
Я прокрутил страницу вниз. В Firefox производительность скролинга была просто ужасной:
Все верно, каждая отрисовка занимала 800ms во время прокрутки, а не те 16,6ms, необходимые для плавной прокрутки. Что же произошло? На сайте почти не было JS, не было webgl, canvas, пусто! Только самописный CSS и HTML. С точки зрения пользователя все выглядело еще прикольнее.
Удалить 5 строк и получить 60fps???
Затем я попробовал удалить свойство background-blend-mode. Мне пришлось поменять фон так, чтобы сохранить текстуру:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
--- 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 все очень даже хорошо:
Как же так? Как такая небольшая правка подняла fps с 1 до 58?
Я схожу с ума?
Это был баг? Какая-то опасная смесь CSS, которая так понизила производительность? В 2013 году была такая история, когда определенная комбинация свойств box-shadow и border-radius сильно замедляла рендеринг. Я случайно попал под тот самый случай?
Я попробовал найти маленький пример с такими же проблемами с производительностью. В примере ниже используются разные фоны и шаблоны, а в CSS всего 10 строк:
Я даже удалил свойство font-family: sans-serif, чтобы получить красивое число. Прошу прощения!
На самом деле вся эта история говорит о том, что я выбрал реально плохой способ написания кода. Это не какая-то странная комбинация HTML, видео и сложного CSS. Просто свойство background-blend-modes очень сильно тормозит в Firefox.
А что в Chrome?
Да кто его знает! При нагрузочном тестировании в Chrome тоже появлялись белые пустые квадраты во время прокрутки. Но они спроектировали свой профайлер так, чтобы он не показывал средний fps (я так думаю):
И все же, я, как необразованный пользователь, могу заметить, что FPS довольно сильно скачет. Даже Chrome не справляется с режимами наложения.
Усвоенный урок
Эта история научила меня одному – если браузер и поддерживает какую-то функцию, не факт, что ее нужно использовать! Думаю, что background-blend-mode можно поставить в комнату ожидания для новых CSS свойств, туда, где раньше были flexbox, border-radius и :before/ :after. Это потеря для всех нас, режимы наложения сильно упрощают создание красивых страниц с текстурами и градиентами.
Источник: //learntemail.sam.today/
Редакция: Команда webformyself.