Производительность CSS
Обычно, когда я создаю сайт, я помещаю весь 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-запросов, я бы объединил файлы и удалил пробелы перед развертыванием, так что это не проблема, но мой вопрос: вызывает ли повторение всех этих селекторов снова и снова какие-либо проблемы с производительностью в браузерах?
В качестве альтернативы, есть ли какие-либо инструменты, которые позволяют избежать этой (потенциальной) проблемы путем объединения определений из разных файлов? то есть: возьмите ввод, указанный в моем втором примере (3 разных файла), и объедините их в один файл, как в первом примере.
Ответы 4
Браузеру нужно будет найти все определения, а затем добавить их и переопределить различные свойства на основе последнего определения. Так что будут небольшие накладные расходы.
При этом он будет довольно минимальным и не очень заметным даже на оборудовании 5-летней давности. В наши дни браузеры достаточно эффективны для этого.
Как сказал Уильям, вы не увидите никаких проблем со стороны браузеров, анализирующих CSS. Однако вы можете увидеть проблему с количеством HTTP-запросов, которые клиент может открыть одному хосту. Обычно по умолчанию используется два. Итак, если вы поместите свой CSS в несколько файлов, вы можете разместить их в отдельном субдомене, и они будут обрабатываться как другой хост, что позволит загружать HTML-страницу одновременно с вашими файлами CSS. .
Заметной разницы в скорости рендеринга / парсинга быть не должно. Как все говорили, компьютеры достаточно быстры, чтобы довольно быстро рендерить CSS.
Ваша проблема действительно будет с количеством запросов, необходимых для загрузки страницы. Дополнительные веб-запросы увеличивают накладные расходы при загрузке страницы. Гораздо быстрее загрузить один большой файл, чем несколько файлов меньшего размера. Это влияет как на клиента (браузер), так и на сервер, обслуживающий все эти файлы CSS.
Пока вы объединяете свои файлы в производстве, все будет в порядке.
Компрессор YUI от Yahoo - довольно хороший инструмент для сжатия ваших файлов CSS в файлы меньшего размера. В последний раз, когда я проверял, он не может определить определения (по крайней мере, в последний раз, когда я смотрел на него), но не должно быть достаточного снижения производительности, чтобы действительно это было необходимо.
Я не могу комментировать производительность, но я попробовал этот подход на своем веб-сайте и в итоге вернулся к одному большому файлу.
Мои причины:
- Я устал создавать правило для div.foo в трех или четырех разных файлах и открывать три или четыре файла, если я хотел изменить этот div.
- Иногда разделить функции не так просто, как хотелось бы. Чтобы центрировать div в IE, вам, возможно, придется центрировать текст родительского элемента, хотя это не стандартный способ. Теперь мой макет смешан с моими шрифтами.
- По мере роста кода для меня самый простой способ найти что-то - это выполнить текстовый поиск нужного мне элемента. Но мне нужно открыть несколько файлов, чтобы увидеть все правила, и, возможно, для этого элемента нет правила в этом файле, поэтому я не получаю совпадений.
Итак, я вернулся к main.css и iehacks.css. И вздохнул с облегчением.
спасибо за идеи. Всегда приятно послушать военные истории, прежде чем что-то начинать.
как я уже сказал, я объединю их в один файл перед развертыванием.