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

Question

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

#myElement {
    color: #fff;
    background-color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 14pt;
}

.myClass {
    font-size: 12pt;
    padding: 5px;
    color: #ee3;
}

Я рассматривал возможность разделения моих определений на несколько различных файлов (colours.css, layout.css, fonts.css ...), как я рекомендовал. Примерно так:

/* colours.css */
#myElement {
    color: #fff;
    background-color: #000;
    border-color: #ccc;
}
.myClass {
    color: #ee3;
}

/* layout.css */
#myElement {
    padding: 10px;
    border: 1px solid;
}
.myClass {
    padding: 5px;
}

/* fonts.css */
#myElement {
    font-size: 14pt;
}
.myClass {
    font-size: 12pt;
}

Чтобы уменьшить HTTP-запросы, я бы объединил файлы и удалил пробелы перед развертыванием, так что это не проблема, но мой вопрос: вызывает ли повторение этих селекторов много раз проблемы с производительностью в браузерах? 1007 *

В качестве альтернативы, существуют ли какие-либо инструменты, позволяющие избежать этой (потенциальной) проблемы путем объединения определений из разных файлов? то есть: взять входные данные, приведенные во втором примере (3 разных файла), и объединить их в один файл, как в первом примере.

Answer 1

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

Это, как говорится, будет довольно минимальным и не очень заметным даже на оборудовании 5 лет. Браузеры довольно эффективны в наши дни.

Answer 2

Я не могу комментировать производительность, но я попробовал этот подход на своем веб-сайте и в итоге вернулся к одному большому файлу.

Мои причины:

• Я устал от создания правила для div.foo в трех или четырех разных файлах и открытия трех или четырех файлов, если я хочу изменить этот div.
• Иногда разделить функции не так просто, как следовало бы. Чтобы центрировать div в IE, вам, возможно, придется центрировать текст родительского элемента, даже если это не стандартный способ. Теперь моя раскладка смешана с моими шрифтами.
• По мере роста кода для меня самый простой способ найти что-либо - это выполнить текстовый поиск нужного мне элемента. Но мне нужно открыть несколько файлов, чтобы увидеть все правила, и, возможно, у этого элемента нет правила в этом файле, поэтому я не вижу совпадений.

Итак, я вернулся к файлам main.css и iehacks.css. И вздохнул с облегчением.

Answer 3

Не должно быть заметной разницы в скорости рендеринга / разбора. Как и все остальные, компьютеры достаточно быстры, чтобы довольно быстро отображать CSS.

Ваша проблема действительно связана с количеством запросов, необходимых для загрузки страницы. Дополнительные веб-запросы увеличивают накладные расходы при загрузке страницы. Загружать один большой файл намного быстрее, чем загружать несколько небольших файлов. Он влияет как на клиент (браузер), так и на сервер, обслуживающий все эти CSS-файлы.

Пока вы объединяете свои файлы в производство, все будет в порядке.

YUI Compressor от Yahoo - довольно хороший инструмент для сжатия ваших CSS файлов в файлы меньшего размера. В последний раз, когда я проверял, он не может определить (по крайней мере, в последний раз, когда я смотрел на него), но не должно быть достаточного снижения производительности, чтобы действительно нуждаться в этом.

Answer 4

Как сказал Уильям, вы не увидите никаких проблем в браузерах, разбирающих CSS. Однако может возникнуть проблема с количеством HTTP-запросов, которые клиент может открыть для одного хоста. Обычно это по умолчанию два. Итак, если вы поместите свой CSS в несколько файлов, вы можете разместить их в отдельном поддомене, и они будут рассматриваться как другой хост, который позволит загружать HTML-страницу одновременно с вашими файлами CSS .