3 ответа

Лучший ответ

За счет упрощения селекторов CSS, сохранения свойств DRY и использования атрибутов class в HTML, перекомпоновка и перерисовка будут (теоретически) облегченными и, следовательно, улучшат плавность и общую производительность сайта.

Перекомпоновка и перерисовка происходят, когда

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

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

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

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

5
madr 22 Мар 2012 в 14:17

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

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

Если вы беспокоитесь о добавлении дополнительных классов CSS, удалите все свои </li> и т. Д., А также свои </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);

Находятся

1
Rich Bradshaw 4 Мар 2012 в 18:49

Прирост производительности от "более короткого CSS" двоякий:

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

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

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

1
steveax 4 Мар 2012 в 19:31