Чем быстрее CSS?

Является div.container быстрее .container? Вы знаете, как в jquery, если вы более конкретны с вашими селекторами, это быстрее, так как он выполняет итерацию через меньшее. Это в случае css?

Есть ли способ измерения производительности в css? Производительность мудрая, что-то вроде этого даже имеет значение или все зависит от веса текста в основном?

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

Ответы

Ответ 1

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

Селекторы имеют присущую эффективность. Порядок более эффективных селекторов CSS выглядит следующим образом:

  • ID, например. #header
  • Класс, например. .promo
  • Введите тип, например. div
  • Смежный брат, например. h2 + p
  • Ребенок, например. li > ul
  • Потомство *, например. ul a*
  • Универсальный, т.е. *
  • Атрибут, например. [type="text"]
  • Псевдо-классы/-элементы, например. a:hover

В отношении вашего второго вопроса:

Есть ли способ измерения производительности в CSS?

Стив Соудерс выпустил онлайн-тест для оценки производительности CSS, который все еще доступен здесь .

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

Производительность мудрая, что-то вроде этого даже имеет значение или все зависит от веса текста в основном?

Короткий ответ - "не совсем".

Долгий ответ: "Это зависит". Если вы работаете на простом сайте, нет смысла беспокоиться о производительности CSS, кроме общих знаний, которые вы можете получить из лучших практик.

Если вы создаете сайт с десятками тысяч элементов DOM, тогда да, это будет иметь значение.

Ответ 2

Как правило, чем меньше правил, тем лучше, поэтому .container будет быстрее, чем div.container. Помимо кэширования, файл .container считывается первым, тогда другие элементы должны иметь добавленный div в качестве фильтра второго уровня... ненужным при многих обстоятельствах.

Это довольно часто встречается в движке, хотя есть небольшие дельта.

См. эту статью: Написание эффективного CSS, который, хотя он и из MDN (и, следовательно, для Mozilla-ориентированного), имеет значение для большей части того, что Я знаю об двигателях вообще.

Ответ 3

delta между лучшим случаем, а наихудший - 50 мс. Другими словами, рассмотрите производительность селектора, но не тратьте на него слишком много времени. См.: https://smacss.com/book/selectors

Поэтому я не думаю, что имеет смысл распространять правила CSS только для получения более высокой производительности. Просто рассмотрите более высокий объем сетевого трафика, возможно, хуже ремонтопригодность,... Однако в ссылке вы можете прочитать, какие правила учитывать, не увеличивая размер CSS.

Если .container и div.container соответствуют точно таким же элементам на вашей странице, первый может быть еще быстрее: если браузер сначала оценит .container, на самом деле он был бы закончен, но с div.container он имеет ДОПОЛНИТЕЛЬНО проверять, является ли элемент div.

отказ от ответственности: я не знаю, как браузеры действительно реализуют эти вещи. Мои выводы основаны на связанной статье.