Производительность 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 запросов, я бы объединения файлов и зачистки пробелы до свитка, так что это не проблема, но мой вопрос: действительно имеющий повторяется снова и снова все эти селекторы вызвать проблемы с производительностью в браузерах?

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

Answer 1

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

Говорят, что это было бы минимально и не очень заметно даже на аппаратных средствах 5 лет. В наши дни браузеры довольно эффективны.

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

Мои причины:

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

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