Самый эффективный селектор CSS: тег заголовка, класс или идентификатор?

Поскольку у нас есть новые элементы в HTML5 (HEADER, FOOTER, SECTION...), как мы должны структурировать наши селектора CSS для повышения производительности?

header {}
header nav {}
header nav ul li{}

ИЛИ

#header {}
#header .nav{}
#header .nav .menu{}

Или каким-то другим, более эффективным способом?

2 ответа

Если по "эффективности" вы подразумеваете, как это влияет на время загрузки страницы, тогда вы должны придерживаться классов и идентификаторов по именам тегов. В Google есть страница для быстрого написания CSS, которая может показаться вам интересной. Суть их совета заключается в том, чтобы уменьшить количество элементов, которые браузер должен сортировать.

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

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

Причина в том, что при написании CSS есть другие факторы. Вот несколько:

  • Вероятно, на вашей странице есть другие вещи, которые занимают гораздо больше времени, чем обработка CSS, независимо от того, насколько неэффективен ваш селектор. Если вы тратите время на оптимизацию, лучше провести его в другом месте.
  • Вы хотите сохранить свою веб-страницу semantic, что определенно не означает, что на вашей странице есть идентификатор.
  • Было бы больно поддерживать такую ​​структуру
  • Это было бы эстетически неудобно HTML

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

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

Проходя через них один за другим:

header против #header

Идентификатор всегда будет более эффективным, если на вашей странице есть несколько элементов заголовка. Если есть только один заголовок, то они должны быть одинаково быстрыми.

header nav vs. #header .nav

На странице лучших практик Google говорится, что селектора-потомки являются наиболее неэффективными селекторами в CSS.

Это потому, что CSS читается справа налево. Как только он найдет самого правого потомка, ему нужно вернуться через дерево DOM, чтобы определить, соответствует ли какой-либо из его родителей. И он должен делать это для каждого матча.

Случается, что селектор останавливает интерпретацию, когда он не подходит. Поэтому, если он ищет навигацию и проходит через ul, она не будет подниматься до дерева DOM, ища родительский заголовок этой ul. Это не должно нас удивлять слишком сильно, но я просто подумал, что упомянул об этом для полноты.

Эти точки вместе приводят нас к выводу, что вы хотите, чтобы правая часть селектора была максимально возможной при использовании селекторов-потомков. Это максимизирует количество элементов, которые не совпадают, поэтому минимизируется количество медленных поисков дерева DOM.

Итак, вернемся к двум селекторам в вашем примере: если в них есть несколько заголовков с несколькими навигаторами, но только у нескольких из них есть класс .nav, тогда право будет более эффективным. Если у вас есть только один заголовок с идентификатором заголовка и один nav с идентификатором nav, то они будут одинаково быстрыми.

header nav ul li против #header .nav .menu

К этому случаю применяются те же правила, что и раньше. Однако в этом случае разница в скорости ускоряется тем фактом, что здесь есть два селектора-потомка, а не только один.

Если ваша страница имеет несколько неупорядоченных списков, то вы, вероятно, захотите пойти со вторым из этих двух селекторов, чтобы не допустить, чтобы каждый li на вашей странице соответствовал этому (более) сложному селектору.


Это зависит от того, как они будут использоваться. Если их нужно только разучить, используйте заголовок {}, иначе добавьте классы и/или идентификаторы.

licensed under cc by-sa 3.0 with attribution.