CSS выпадающее меню: какой самый быстрый селектор?

У меня есть многоуровневое меню навигации на моей странице, состоящее из неупорядоченного списка. Этот список имеет класс menu, например, так:CSS выпадающее меню: какой самый быстрый селектор?

<ul class="menu"> 
    <li><a href="#">Category 1</a></li> 
    <li><a href="#">Category 2</a></li> 
    <li><a href="#">Category 3</a> 
     <ul> 
      <li><a href="#">Subcategory 1</a></li> 
      <li><a href="#">Subcategory 2</a></li> 
     </ul> 
    </li> 
</ul>

В href атрибуты устанавливаются в # для целей иллюстрации.

Мой вопрос: какой лучший селектор использовать для такого рода меню относительно скорости?

В настоящее время я использую что-то вдоль этих линий (опять же, только для иллюстрации, существует правила отсутствуют):

.menu { 
    background-color: #CCC; 
} 

.menu li { 
    background-color: #FFF; 
} 

.menu li > ul li ul { 
    background-color: #333; 
}

Является ли класс быстрого селектора в этом случае? Или я должен использовать что-то вроде .navigation-container ul? У вас есть какие-нибудь рекомендации?

источник

2013-09-17 Sven

уверен, что вы не увидите каких-либо существенных изменений с точки зрения скорости – Vic

Разница в скорости между большинством селекторов настолько минимален, чтобы быть незначительным. Вам действительно нужно увеличение скорости? Скорее всего, лучше сосредоточиться на том, чтобы работать, а затем находить узкие места в скорости и прилагать усилия для улучшения этих областей. – ajp15243

Упрощенные селектора быстрее, чем сложные селекторы. Например, .menu быстрее, чем .menu ul, но это не драматическое различие.

У вас все в порядке. Возможно, вы попытаетесь сделать .menu li > ul li ul менее сложным, но не ожидайте заметить какой-либо разницы, потому что вы могли бы сэкономить миллисекунду или секунду на времени рендеринга.

Вот некоторые чтения об эффективных seletors CSS: http://csswizardry.com/2011/09/writing-efficient-css-selectors/

источник

2013-09-17 18:07:36 Guffa

Быстрее ссылается на идентификатор, например. #menu, #menu li. Я бы также добавил идентификатор к sub ul тегам тоже :)

источник

2013-09-17 17:58:09

CSS выпадающее меню: какой самый быстрый селектор?

ответ

Смежные вопросы