Ненужные CSS и оптимизация

Question

Замедляет ли включение ненужных CSS браузер (Chromium, Mobile Safari)?

Я имею в виду

function insert_style_sheet()
{
    include "style_sheet.tpl";
}

в каждом php-файле.Файл шаблона style_sheet.tpl имеет следующий вид:

<link rel="StyleSheet" type="text/css" href="css/main.css">
<link rel="StyleSheet" type="text/css" href="css/controls.css">
<link rel="StyleSheet" type="text/css" href="css/whatever.css">

Answer 1

Да, и вы можете попробовать измерить разницу с помощью анализатора производительности, такого как YSlow.Дополнительная таблица стилей может иметь незначительный эффект скорости, в зависимости от ее размера.По сути, большее количество таблиц стилей добавляет это в конвейер:

• Больше правил CSS, которые браузер должен проверять для каждого элемента, против
• Больше циклов HTTP, чтобы захватить файл CSS (сокращая количествоHTTP-вызовов имеет большое значение, посмотрите на объединение ваших таблиц стилей)
• Больше байтов, которые нужно загрузить

Как Пол Ирриш недавно написал в Твиттере , "КогдаВы оптимизируете производительность своего сайта / приложения, ваши приоритеты: 1. Сетевые подключения 2. Доступ к DOM 3. Оптимизация JavaScript. "

Answer 2

На время загрузки страницы влияют:

1. Количество загруженных .css файлов
2. Размер загруженных .css файлов

Производительность страницы: (лучше всего видно при прокрутке или изменении размера окон браузера)

1. Количество селекторов, которые должен искать браузер.
2. Количество свойств на каждый селектор

Итак ... Объединяйте файлы, удаляйте неиспользуемые свойства CSS и селекторы. Сожмите ваш CSS, но сохраните несжатую версию, чтобы вы могли редактировать в семантике, а затем сжать и сохранить ее.

Вот так я работаю с CSS. Надеюсь, это полезно для вас!

Answer 3

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