Чего мне никогда не говорили о CSS

0
2174

Это ни в коем случае не критика коллег, а всего лишь краткий список важных вещей, которые я самостоятельно узнала о CSS в последнее время.

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

Чтобы исправить это, я провела некоторые исследования и составила небольшой список понятий, которые считаю интересными и полезными для лучшего понимания и написания CSS.

Этот список определённо не исчерпывающий. Он содержит только новое, что я узнала за последние несколько дней и чем хочу поделиться, вдруг это поможет кому-то ещё.

Терминология

Комбинатор потомков

Чего мне никогда не говорили о CSS
Чего мне никогда не говорили о CSS

Макет, отрисовка и композиция

1. Макет (layout)

2. Отрисовка (paint)

Изменение свойства ‘paint’ не влияет на макет, поэтому браузер пропускает шаг макетирования, но всё равно делает отрисовку.

На отрисовку зачастую уходит больше всего времени при рендеринге.

3. Композиция (composite)

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

Для подробной информации, какие процессы запускают различные свойства CSS, см. триггеры CSS.

Производительность CSS

Селектор потомков может дорого обойтись

Например:

Пример селектора потомков
Пример селектора потомков

Браузеру придётся оценить все ссылки на странице, прежде чем перейти к тем, которые находятся внутри нашего раздела #nav.

Более эффективный способ — добавить конкретный селектор .navigation-link на каждую ссылку <a>внутри раздела #nav.

Браузер считывает селекторы справа налево

Рассмотрим следующий пример:

Браузер читает справа налево
Браузер читает справа налево

Шаги:

  • сопоставить все <a> на странице;
  • найти все <a>, содержащиеся в <li>;
  • взять совпадения и сузить их до тех, которые содержатся в <ul>;
  • наконец, отфильтровать вышеупомянутый выбор до тех, которые содержатся в элементе с классом .container.

Глядя на эти шаги, мы видим, что чем более конкретным является правый селектор, тем более эффективно браузер сможет фильтровать и применять свойства CSS.

Чтобы улучшить производительность приведённого примера, мы могли бы заменить .container ul li a, добавив что-то вроде .container-link-style на самом теге <a>.

По возможности не изменяйте макет

Например, геометрические свойства widthheighttopleft требуют заново рассчитать макет и обновить дерево рендеринга.

Если вы измените эти свойства на многих элементах, потребуется много времени для вычисления и обновления их положения/размера.

Будьте осторожны со сложностью отрисовки

Дорогие свойства CSS

Некоторые из дорогих свойств:

  • border-radius
  • box-shadow
  • filter
  • :nth-child
  • position: fixed

Это не означает, что их вообще нельзя использовать, но нужно понимать, что если элемент использует некоторые из этих свойств и рендерится сотни раз, это повлияет на производительность.

Порядок (ordering)

Порядок имеет значение

Чего мне никогда не говорили о CSS

А затем посмотрим на HTML-код:

Чего мне никогда не говорили о CSS

Порядок селекторов в HTML не имеет значения, а в CSS — имеет.


Хороший способ оценить производительность CSS — использовать инструменты разработчика в браузере.

В Chrome или Firefox можете открыть инструменты разработчика, перейти на вкладку «Производительность» и записать, что происходит при загрузке или взаимодействии с вашей страницей.

Скриншот вкладки «Производительность» в Chrome
Скриншот вкладки «Производительность» в Chrome

источник