Как композиция классов CSS влияет на скорость рендеринга страниц?

Для конкретизации вопроса приведу сферический код в вакууме.
1) Используем семантическую идеологию:

HTML
<div class="header">...</div>
    <div class="main">...</div>
    <div class="footer">...</div>

CSS
.header {
    height: 15%;
    margin: 0 0 1% 0;
    background-color: red;
}
.main {
    margin: 0 2%;
    background-color: green;
}
.footer {
    height: 15%;
    margin: 1% 0 0 0;
    background-color: blue;
}

2) Используем функциональную идеологию:

HTML
<div class="header box"></div>
<div class="main"></div>
<div class="footer box"></div>

CSS
.header {
    margin: 0 0 1% 0;
    background-color: red;
}
.main {
    margin: 0 2%;
    background-color: green;
}
.footer {
    margin: 1% 0;
    background-color: blue;
}
.box {
    height: 15%;
}

3) Используем гибридную идеологию, что позволяет нам не загрязнять ни HTML, ни CSS:

HTML(то же что и в первом примере)
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

CSS
.header,
.footer {
    height: 15%;
}
.header {
    margin: 0 0 1% 0;
    background-color: red;
}
.main {
    margin: 2%;
    background-color: green;
}
.footer {
    margin: 1% 0 0 0;
    background-color: blue;
}



Вопросы:
1) Какой код будет рендериться быстрее?Если он увеличится в 10/1000 раз и наши смежные селекторы примут в себя намного больше CSS правил, если этих смежных селекторов станет в 10 раз больше?
2) Почему тот или другой код будет быстрее в данных случаях?
3) Насколько критичны будут задержки в данных случаях?
4) Как я могу сам замерять данные задержки и какой для этого нужен софт (может специальные секундомеры)?

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

P.S. Я в курсе что для оптимизации в первую очередь нужно минифицировать CSS, а также что семантичная идеология не семантична.
  • Вопрос задан
  • 2650 просмотров
Решения вопроса 2
sim3x
@sim3x
Здравствуйте, хлебцы!
Проблема том, что ваш вопрос имел смысл 10+ лет назад, когда выдумали бем (он именно решал проблему вложенности селлекторов)
Сейчас с длинной, вложенностью селекторов и мешаниной цсс проблем нет (их очень сложно создать) из-за дикого роста скорости железа (?) и из-за того что существует хромиум-blink-webkit

Все ваши попытки оптимизации уже делаются плагинами https://goalsmashers.github.io/css-minification-be... и реальная задача сейчас перед фронтендерами стоит в создании подхода для нормального чтения верстки людьми
Для чего использую препроцессоры (sass), shadow dom, css-in-js, template engines, etc

Ответ на
влияет на скорость рендеринга страниц
лежит в другой плоскости - нужно смотреть в профайлер браузера, на repaint, когда браузеру требуется пересобирать верстку, цсс, жс и класть ее в гпу
https://developers.google.com/web/fundamentals/per...
https://developers.google.com/web/fundamentals/per...
Ответ написан
JRK_DV
@JRK_DV
NaN == NaN ? 'a' : 'b' // a или b?
1,2,3 - пытаетесь сравнить скорость поиска элемента по селектору, это крупицы, если сравнивать с общим рендерингом страницы
(как пример, экспериментировать с таблицами множественных данных, заменив селекторы выигрыш почти не получим)
4. Можете использовать инспектор браузера, вкладку performance - тут есть много полезной информации, в частности время рендеринга страницы
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Qlink Автор вопроса
Не советую использовать гибридную идеологию, сегодня сам пробовал на codepen написать сайт, максимально объединяя код, в итоге уже через 15 минут я получил что-то вроде этого:
.cite-header,
.cite-footer,
.main { ... }
.cite-header,
.cite-footer { ... }
.aside-1,
.aside-2,
.main { ... }
.cite-footer,
.main { ... }
// И ещё кучу таких 'паровозов'.

Я рад, что JRK_DV сказал, что разницы нет(почти).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы