Замедляют ли дополнительные неиспользуемые определения CSS браузеры? - PullRequest
Новая
       3

Замедляют ли дополнительные неиспользуемые определения CSS браузеры?

6 голосов
/ 28 апреля 2011

После работы со многими CMS и обработки множества HTML-проектов, когда я увидел использование SilverStripe CSS , я был преобразован.

По сути, было бы бесполезно менять идентификаторыв тегах <div> в зависимости от страницы, на которой вы были, и что изменение классов и идентификатора тега <body> будет более простым способом изменения конкретных страниц.

Такие убеждения были поставлены под сомнение коллегой во времяследующая проблема:

На конкретном веб-сайте у нас есть множество страниц, которые похожи по структуре.Некоторые могут включать специальную форму, а некоторые нет.Все специальные формы должны иметь различное фоновое изображение в зависимости от того, в каком подразделе мы находимся.

Из-за утверждения, что «дополнительные строки CSS замедляются body.onLoad s», мой аргумент для кодирования всех фоновых ожиданийв CSS был отклонен.

Кто-нибудь может привести доказательства между различными случаями?Случаи, в том числе: плохо закодированный CSS и CSS хорошо закодированный, но имеющий различные неиспользуемые CSS на каждой странице?

(А если говорить конкретно о моей проблеме, кто-нибудь может объяснить мою неловкость? Мне неудобно, принимая изображениябудет там и автоматически генерировать встроенный CSS (или теги стиля на основе заголовка) на основе переменной из базы данных.)

1 Ответ

7 голосов
/ 28 апреля 2011

Это не имеет значения ( заметно ), если ваш сайт не Gmail или YouTube (или аналогично CSS).

У Google есть несколько рекомендаций в руководстве по скорости страницы:

http://code.google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

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

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

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

Относительно этого:

В связи с утверждением, что«дополнительные строки CSS замедляют body.onLoads», мой аргумент для кодирования всех фоновых ожиданий в CSS был отклонен.

Дополнительное время составляет порядка нескольких миллисекунд.Делайте то, что проще и удобнее в обслуживании, а не то, что более «эффективно».

...