Замедляют ли дополнительные неиспользуемые определения CSS браузеры?
После работы со многими CMS и обработки множества HTML-проектов, когда я увидел использование CSS в SilverStripe, я был преобразован.
По сути, что было бы бесполезно менять идентификаторы в <div> теги в зависимости от страницы, на которой вы были, и что изменение <body> классы и идентификатор тега будут более легким способом изменения определенных страниц.
Такие убеждения были поставлены под сомнение коллегой во время следующей проблемы:
На конкретном веб-сайте у нас есть множество страниц, которые похожи по структуре. Некоторые могут включать специальную форму, а некоторые нет. Все специальные формы должны иметь различное фоновое изображение в зависимости от того, в каком подразделе мы находимся.
Из-за заявления о том, что "дополнительные строки CSS замедляются body.onLoads,"мой аргумент для кодирования всех фоновых ожиданий в CSS был отклонен.
Кто-нибудь может привести доказательства между различными случаями? Случаи, включающие в себя: плохо закодированный CSS и CSS хорошо закодированный, но имеющий множество неиспользуемых CSS на каждой странице?
(А если говорить конкретно о моей проблеме, может кто-нибудь объяснить мою тревогу? Мне неудобно предполагать, что там будут изображения и автоматически генерировать встроенный CSS (или теги стиля на основе заголовка) на основе переменной из базы данных.)
1 ответ
Это не будет иметь значения (заметно), если ваш сайт не является Gmail или YouTube (или аналогично CSS тяжелым).
У Google есть некоторые рекомендации в их Руководстве по скорости страницы:
http://code.google.com/speed/page-speed/docs/payload.html
Удаление или откладывание правил стиля, которые не используются документом, позволяют избежать загрузки ненужных байтов и позволяют браузеру начать рендеринг раньше.
Прежде чем браузер сможет начать отображать веб-страницу, он должен загрузить и проанализировать любые таблицы стилей, необходимые для размещения страницы. Даже если таблица стилей находится во внешнем кэшированном файле, рендеринг блокируется до тех пор, пока браузер не загрузит таблицу стилей с диска. Кроме того, после загрузки таблицы стилей движок CSS браузера должен оценить каждое правило, содержащееся в файле, чтобы определить, применимо ли это правило к текущей странице. Часто многие веб-сайты повторно используют один и тот же внешний CSS-файл для всех своих страниц, даже если многие из определенных в нем правил не применяются к текущей странице.
Лучший способ минимизировать задержку, вызванную загрузкой таблиц стилей и временем рендеринга, - это сократить использование CSS; очевидный способ сделать это - удалить или отложить правила CSS, которые на самом деле не используются текущей страницей.
По этому поводу:
Из-за утверждения, что "дополнительные строки CSS замедляют body.onLoads", мой аргумент для кодирования всех фоновых ожиданий в CSS был отклонен.
Дополнительное время составляет порядка нескольких миллисекунд. Делайте то, что проще и удобнее в обслуживании, а не то, что более "эффективно".