Влияние OOCSS на производительность сайта - более короткий CSS, но громоздкий HTML с большим количеством классов - PullRequest
Новая
       22

Влияние OOCSS на производительность сайта - более короткий CSS, но громоздкий HTML с большим количеством классов

1 голос
/ 04 марта 2012

Я читал сегодня о OOCSS , в котором говорится, что использование этого подхода имеет 2 преимущества

  1. Сокращение CSS = Лучшая производительность
  2. Лучшая ремонтопригодность

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

Мой вопрос заключается в том, как более короткий CSS-файл может повысить общую производительность сайта, добавляя больше байтов (классов) в html, в то время как css представляет собой один файл и будет загружен сразу в кэш?

Ответы [ 3 ]

5 голосов
/ 22 марта 2012

Упрощая CSS-селекторы, сохраняя свойства СУХИЕ и используя атрибуты class в HTML, переформатирование и перерисовка будут (теоретически) более легкими и, следовательно, увеличат плавность и общую производительность сайта.

Перерисовывается и перекрашивается, когда

  • Изменение размера окна
  • Смена шрифта
  • Добавление или удаление таблицы стилей
  • Изменения содержимого, такие как ввод текста пользователем в поле ввода
  • Активация псевдоклассов CSS, таких как: hover (в IE активация псевдокласса родного брата)
  • Управление атрибутом класса
  • Скрипт, управляющий DOM
  • Расчет смещенияШирина и смещениеВысота
  • Установка свойства атрибута стиля

(приведенный выше список скопирован с Перерисовки и перерисовки: производительность CSS делает ваш JavaScript медленным? автор Николь Салливан, создатель OOCSS)

Также посмотрите это видео, чтобы увидеть перекомпоновки и перекраски в действии: http://www.youtube.com/watch?v=ZTnIxIA5KGw (около 30 секунд вашего времени)

Тем не менее, легко анализируемый CSS также улучшит отзывчивость вашего сайта (как в плавности), а не только качество поддерживаемого кода.

1 голос
/ 04 марта 2012

Увеличение производительности от "более короткого CSS" в два раза:

  1. Меньшая таблица стилей
  2. Короткие селекторы

Длинный css-селектор неэффективен. Стив Соудерс (среди прочих) много писал о производительности селектора CSS . Более эффективные селекторы, вероятно, более чем смещают несколько дополнительных байтов для нескольких классов.

Использование мета-языка CSS, например LESS или Sass , esp. если вы используете @extend или mixins, вы получите лучшее из всех миров.

1 голос
/ 04 марта 2012

Очевидно, что у этого нет никакого значимого ответа - каково определение поста? Сколько байтов слишком много?

Короткий ответ таков: если вы распаковываете html, правильно кешируете и делаете разумное повторное использование, то это не имеет никакого значения.

Если вы беспокоитесь о добавлении некоторых дополнительных классов CSS, удалите все свои </li>, s и т. Д., А также свои </body> и свои </html>. Кроме того, для любых атрибутов, которые являются отдельными словами и не содержат проблемных символов, отбросьте окружающий их ". Эти изменения должны сбалансировать добавление классов.

(В случае, если это звучит немного странно, я бы действительно рекомендовал сделать это на вашем уровне кэширования - что-то вроде этого сделает работу: 

$page_content = str_replace(array("</option>","</td>","</tr>","</th>","</dt>","</dd>","</li>","</body>","</html>"),"",$page_content);       
$page_content = preg_replace('/(href|src|id|class|name|type|rel|sizes|lang|title|itemtype|itemprop)=(\"|\')([^\"\'\`=<>\s]+)(\"|\')/i', '$1=$3', $page_content);                
$page_content = preg_replace('!\s+!', ' ', $page_content);

)

...