Хорошо, так что это полностью зависит от варианта использования. Я собираюсь заниматься делами.
Пункт 1 - Относительно данного примера
Случай А
Скажите, что ваш код просто:
<a href="#" class="myImage">
<img>
</a>
В этом случае .myImage img и .myImage img:only-child будут иметь практически идентичные показатели производительности. Причина в следующем:
Хиты производительности CSS происходят из-за необходимости стилизовать или изменять стили блоков. Что делает CSS, так это влияет на ваш графический процессор, а не на ЦП, поэтому нас интересуют только визуальные обновления. И повторная стилизация вещей с повторяющимися свойствами ДЕЙСТВИТЕЛЬНО вызывает перерисовку (под этим я подразумеваю повторяющиеся свойства, которые применяются позже, что обычно вызывают селекторы).
Обычно .myImage img стилизует ВСЕ <img> в .myImage. При использовании селектора only-child возможно не все стили (очевидно).
Но в этом примере и .myImage img, и .myImage img:only-child будут выполнять одинаковые действия, так как они оба вызовут 1 отрисовку/перерисовку на одном и том же поле.
Случай Б
Но предположим, что у нас есть:
<a href="#" class="myImage">
<img>
<img>
</a>
Однако здесь у нас другая история.
В этом примере only-child вообще не будет работать, так как <img> не единственный дочерний элемент.
Случай C
Наконец, предположим, что у вас есть это, но вы хотите стилизовать только под:
<a href="#" class="myImage">
<img>
</a>
<div class="myImage>
<img>
<img>
</div>
В этом случае использование селектора only-child будет значительно лучше с точки зрения производительности, поскольку вы будете стилизовать только один элемент вместо трех.
Заключение и вывод
В общем, запомните несколько вещей.
Селекторы CSS помогают вам в написании кода, потому что вы можете добавить меньше идентификаторов и классов, однако они почти всегда менее эффективны, чем использование всех идентификаторов и классов, потому что использование селекторов вызовет дополнительные перерисовки. (Поскольку вы неизбежно будете стилизовать несколько элементов с помощью какого-либо селектора, а затем изменять стиль других вещей с помощью идентификаторов или классов, вызывая ненужные перерисовки)
only-child НЕ быстрее, чем .class child, если этот .class имеет только один дочерний элемент.
Технически то, что вы сравниваете, это две совершенно разные вещи, используемые для разных целей.
Заключение
В окончательном ответе на ваш вопрос. В показанном вами примере ни один из них не является более эффективным, чем другой, поскольку они вызывают идентичные перерисовки.
Однако, как
«Помогает ли :only-child специфичности при выборе селектора?»
идет: Да, в этом смысл селектора. См.: http://www.w3schools.com/cssref/sel_only-child.asp.
Источники: я являюсь важным разработчиком-добровольцем для Mozilla Thunderbird и проекта Mozilla и работаю в области CSS.
К вашему сведению
Конечно, есть странные исключения, но я не буду их здесь рассматривать, так как думаю, что ваш точный вопрос не дает блестящего примера.
Пункт 2 - Касательно скорости поиска селекторов
Я намеренно пытаюсь донести мысль о том, что именно рисование вызывает удар производительности CSS, а не поиск селекторов. Однако я говорю это не потому, что поиск селекторов не требует времени, а потому, что это время ничтожно мало по сравнению со временем, затрачиваемым на отрисовку. Тем не менее, если бы у вас было 5000 <div>s или что-то в этом роде, и вы попытались бы стилизовать некоторые из них с помощью псевдоселекторов, это определенно заняло бы немного больше времени, чем использование классов CSS и идентификаторов.
Опять же, в вашем примере это не имело бы никакого значения, поскольку он все равно просматривал бы каждый элемент. Почему only-child полезен с точки зрения производительности, так это потому, что он прекратит поиск некоторого элемента после того, как найдет более одного дочернего элемента, тогда как простое выполнение class child этого не сделает.
Проблема с псевдоселекторами заключается в том, что они обычно требуют много дополнительного поиска, И это происходит после идентификаторов, классов и т. д.
Предоставленные вами ссылки на самом деле очень полезны, и я удивлен, что они не ответили на ваш вопрос.
Я должен отметить одну вещь: многие селекторы, которые считаются медленными, теперь могут быть значительно улучшены. См.: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
Помните, что производительность селектора важна только на очень больших веб-сайтах.
person
Josiah
schedule
15.01.2014
