Оптимизация CSS, которая быстрее

Question

Что, по вашему мнению, быстрее, иметь таблицу стилей main.css, а затем дополнительную таблицу стилей для КАЖДОГО раздела сайта или иметь таблицу стилей main.css, а затем иметь одну дополнительную таблицу стилей длявесь остальной сайт?Дополнительная таблица стилей будет перехватывать элементы через идентификаторы тела и классы и потребует более длинного селектора.Например, # body-id .page-wrap.
Вопрос сводится к следующему: замедляет ли добавление дополнительного селектора для отдельных стилей раздела (10–20 уникальных элементов) сайт больше, чем дополнительный HTTP-запрос для некэшированной таблицы стилей?

Answer 1

Вопрос сводится к следующему: замедляет ли добавление дополнительного селектора для отдельных стилей раздела (10–20 уникальных элементов) сайт больше, чем дополнительный HTTP-запрос для некэшированной таблицы стилей?

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

Хотя это полностью зависит от вас. Если производительность на стороне сервера имеет решающее значение, было бы лучше свести HTTP-запросы к минимуму, но не жертвуйте обслуживаемостью для этого. Забудьте о парсере селектора или производительности рендеринга, так как этот браузер обычно должен беспокоиться.

Answer 2

Как правило, у меня есть файл main.css, содержащий все стили, которые используются на нескольких страницах веб-сайта. Для всего остального я поместил стили в заголовок соответствующей страницы.

Answer 3

Вы должны выбрать вариант 2: «иметь таблицу стилей« main.css », а затем иметь одну дополнительную таблицу стилей для всего остального сайта». Потому что только в первый раз он загрузит CSS, а затем подаст его из кэша браузера. Выполнение http-запроса всегда обходится дорого, поскольку оно поставляется с некоторыми дополнительными байтами файлов cookie (aprx: 270b), информацией заголовка, временем запроса / ответа (задержка в сети) и дополнительным запросом на apache.

Убедитесь, что заголовки кэша включены на вашем сервере, для кэша браузера для css / js / images, надеюсь, у вас это уже есть.