Тяжелые CSS свойства которые заставляют ваш браузер тормозить

Тяжелые CSS свойства которые заставляют ваш браузер тормозить

Слушая доклад Андрея Ситника из Evil Martians про CSS линтер, я узнал что существуют тяжелые CSS свойства, которые сильно влияют на скорость отображения станицы в браузере. И действительно, я замечал это ранее и не раз.

Веб шрифты, custom scroll, smooth scrolling

То, что мне уже было известно:

— большое количество подключенных веб-шрифтов, даже если 70% из них не используются — сильно тормозят прокрутку и рендеринг страницы.

— кастомный скролл — одно из самых больших зол. Хуже только кастомный скролл плюс js/jQuery плагин smooth scrolling effect.

Box-shadow

Вот что сказал Андрей:

— box shadow в большом количестве замедляет рендеринг и прокрутку страницы.

Погуглив на тему box-shadow, я узнал что чем больше тень, тем сильнее она тормозит рендеринг и прокрутку. При скролле страницы на каждые 30-40 пикселей скролла, тень перерисовывается браузером заново по 3-4 раза! Теперь следует 10 раз подумать прежде чем лепить box-shadow эффект. Смею предположить что с text-shadow та же история.

Исследование airbnb

Airbnb провели целое исследование на эту тему CSS box-shadow Can Slow Down Scrolling. Вот их результаты, это просто ошеломляет:

10px box-shadow blur-radius = 3 перерисовки элемента на каждые 40px скролла

От тени полностью они не отказались, но поменяли 10px blur на 3px blur. Подробнее у них в статье по ссылке. Сказать честно, их сайту и сейчас явно не помешало бы ускорить производительность. Рекомендую подписаться на их блог/твиттер если вы фронтэнд разаботчик.

border-radius и что с ним не так

Дальше по списку. Еще немого погуглив, я обнаружил статью про выявление проблем с производительностью. Автор сделал пару десятков автоматических тестов, которые запускал по 10 раз на своем сайте, чтобы выявить CSS свойство которое значительно тормозило отрисовку страницы. И это был — border-radius! Причем не просто радиус. Это свойство было применено к большому контейнеру, в котором располагалось очень много элементов. Это как если взять главный контейнер main со списком всех статей на блоге, запихнув в него же сайдбар и навигацию, и задать ему радиус скругления. В общем не знаю почему именно, но вот такие результаты дало его исследование. Отсюда делаем вывод. Радиус для кнопок и небольших плашек — используем как и ранее. Для задания радиуса большим плашкам в которых помещен чуть ли  не весь контент страницы следует относится осторожнее. Если есть проблемы с производительностью, присмотритесь к ним.

Самые дорогие / сложные CSS свойства для отображения

Очень познавательная статья про селекторы, раздутый код и CSS свойства. Рекомендую хотя бы бегло ее просмотреть. Если вкратце и сразу к выводам.

Самые дорогие CSS свойства — это те свойства, которые браузер должен пересчитывать каждый раз когда прорисовывает элемент. К ним относятся: box-shadow, border-radius, прозрачность (так как браузер должен высчитывать что показывает под полу-прозрачным элементом), трансформами transform и убийцы производительности CSS фильтры. Если производительность ваш приоритет, то все из перечисленного ваш худший враг.

Пользуйтесь BEM

Эта статья про CSS свойства, а не про селекторы. Но говоря о производительности нельзя их не затронуть. Пользуйтесь BEM именованием для классов и все у вас будет в порядке.

 

Статьи по теме и около:

Какие анимации самые «дешевые» для рендеринга в браузере

UnCSS — Инструмент для определения и удаления неиспользуемых CSS селекторов

  • verbaux

    А как BEM-именование способствует производительности?

    • SocialChooozy

      имеется ввиду решение проблемы с глубокой вложенностью
      т.к. с бем наименованием все классы будут на первом уровне вложенности

      • verbaux

        Мне кажется, что стоит описать это подробнее, так как только от наименования никакого профита не будет.

      • Спасибо, именно это и имел ввиду.

    • Igor Syrov

      https://benfrain.com/selector-test/19.html
      Тут можете посмотерть в чем разница.
      В двух словах, при использовании BEM у Вас в подавляющем большенстве случаев будет ображение к DOM элементу через одиночный класс, что заметно быстрее чем ипользование того же каскада и тем более универсальных селекторов.

      • verbaux

        Я понимаю, но только из «bem-наименования» это не следует. Надо сам подход использовать.

        • SocialChooozy

          а вы любите все усложнять, да?)

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

          • verbaux

            Иногда :)
            Поверьте. это не следует только из именования :) Я видел людей, которые считали, что они используют БЭМ, но это было не так — да, они писали правильные названия классов, но это не мешало им в CSS устраивать кашу с вложенностью.

  • Eugene Balashov

    http://codepen.io/alivedd/pen/pgqOwK как то давно проводил замеры fps для разных свойств.

  • Борис Гревцов

    >>> Еще немого погуглив, я обнаружил статью про выявление проблем с производительностью.
    Чисто для справки информация из статьи
    Chrome 34.0.1838.2 dev
    Firefox 29.0a2 Aurora
    Opera 19.0.1326.63
    Internet Explorer 9.0.8112.16421
    Android 4.2 (7″ tablet)

    Хром уже 55 версии на секундочку.

  • Златослав Десятников

    Господи, ребят, пишете про веб, а с телефона ад. Иконка меню пропадает, если нажать пару раз + текст не умещается. Фи.

    https://uploads.disquscdn.com/images/b77edd92dbd795a96510a5a97e78461fb3b4001b242e3d0456b1677a8403a8c7.png

  • А как сам доклад называется и где состоялся, чтобы нагуглить оригинал?

  • Сергей Артёмов

    Некоторые опечатки:
    >Marsians
    Martians
    >То что ме уже было известно
    То, что мне уже было известно
    >js/jqurey
    js/jQuery
    >ghdtkb
    провели (там же Air-b-n-b — зачем дефисы, вроде слитно везде было)
    >запусках
    запускал

    За статью и ссылки спасибо 😉

    • Спасибо) Поправил.

      • Сергей Артёмов

        В jQuery не в Q проблема, а в r :)