CSS селектор скорости

Question

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

Статью можно найти здесь. http://css -tricks.com / эффективно-рендеринг CSS /

Я собираюсь создать страницу с разными документами на одной странице:

Мой вопрос: как мне использовать HTML для эффективности CSS или наоборот?

<div class="document-type-1">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

<div class="document-type-2">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

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

.document-type-1 h1 {

}

.document-type-1 p {

}

.document-type-2 h1 {

}

.document-type-2 p {

}

Это будет "неэффективно", так как все p-теги будут найдены первыми ...

Как бы вы поступили, если это нужно сделать быстрее, и вы сможете переместить ту же статью в новый тип документа?

Answer 1

Насколько я понимаю, если я правильно понимаю статью, самый эффективный способ сделать это - если вы не используете пользовательский идентификатор для каждого элемента - будет:

// YUCK!

<div class="document-type-1">
    <h1 class="document-type-1-h1">Some heading</h1>
    <p class="document-type-1-p">Some paragraph</p>
</div>

.document-type-1-h1 {

}

.document-type-1-p {

}

Но это отвратительно . Это дилемма, что написание совершенно эффективного CSS идет вразрез со всеми правилами написания хорошо CSS.

Если бы не было реальных, фактических проблем со скоростью рендеринга, вызванных правилами CSS, я бы склонялся к соблюдению некоторых правил здравого смысла (например, не тратя расточительства на стиль глобальных селекторов > *, не используя "чрезмерно квалифицированные селекторы", такие как * 1013) *, не использую слишком много правил в общем ....), но в остальном сфокусируйтесь на чистом, хорошо структурированном CSS. Как говорится в самой статье:

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

Советы по скорости страницы Google , на которые ссылается @gulbrandr в своем ответе, дают полезные советы из реальной жизни.

Answer 2

Рекомендации Google Page Speed ​​объясняют, как написать эффективные селекторы CSS: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 3

Есть много вещей, которые необходимо учитывать при оптимизации скорости рендеринга страницы. Селекторы CSS и разметка HTML - это лишь некоторые из них.

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

1. Разметка вашего контента

Используйте основные HTML-элементы, если вам не нужна дополнительная конкретность.

<h1>Some heading</h1>
<p>Some paragraph</p>

<h1>Some heading</h1>
<p>Some paragraph</p>

<div class="module">
  <h1 class="title">Some heading</h1>
  <p>Some paragraph</p>
</div>

<div class="module featured-module">
  <h1 class="title">Some heading</h1>
  <p class="content">Some paragraph</p>
</div>

2. Стили базовых элементов

Эти селекторы быстрые, потому что у них нет предков, которые должны быть сопоставлены. В идеале они подходят для большинства стилевых потребностей страницы.

h1             { font-size: 20px }
p              { font-size: 14px }
.title         { font-family: Georgia }
.module        { color: orange }

Важно узнать, какие свойства наследуются дочерними элементами стилизуемого элемента. Например, когда свойство color определено для класса .module, цвет будет использоваться для всех дочерних элементов (если не существует более определенных правил).

3. Переопределение стилей базовых элементов

Если у вас много тегов <p> на странице, и вы хотите переопределить только стили нескольких, тогда присвойте этим нескольким тегам <p> класс и используйте класс для нацеливания стилей на эти несколько тегов <p> .

.module .title { color: red }
.featured-module .title { color: blue }

Примечание: Если строка селектора соответствует специфичности и идет после переопределения правила, то она применяется без какой-либо дополнительной специфичности.

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

#login-module { color: tan }

Если у вас много <p> тегов и вы хотите переопределить половину из них (или много разных групп из них), вы должны принять решение либо A. добавить к ним классы, либо B. жертвовать скоростью страницы (немного?) И использовать селекторы потомков:

.featured-module p { }
.category-module p { }

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

Резюме

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

Примечание: Скорость селекторов для JavaScript не такая, как в CSS. Проверьте эти тесты: http://mootools.net/slickspeed/