Признаюсь, я не часто задумываюсь над этим вопросом... Насколько эффективен CSS, который мы пишем, и насколько быстро происходит рендеринг браузера?
Это то, о чем должны беспокоиться разработчики браузеров (страницы загружаются быстрее, а пользователи будут счастливее). В Mozilla есть статья: о лучших практиках . Конечно, Google тоже очень обеспокоен этим вопросом, и у них тоже есть такая статья: Оптимизация рендеринга в браузере .
Давайте посмотрим, за что они в основном выступают, а затем обсудим их практичность.
справа налево
Важный принцип того, как браузеры читают ваши селекторы CSS, заключается в том, что они читают их справа налево. Это означает, что для селектора типа ul > li a[title="home"] сначала будет прочитан a[title="home"]. Эту часть обычно называют «ключевым селектором» (можно ли его называть «селектором цели» -_-!) Последняя часть селектора также является выбранной меткой.
ID — самые эффективные, универсальные — самые медленные.
Существует четыре целевых селектора: идентификатор, класс, тег и универсальный символ. Давайте посмотрим на их эффективность:
#main-navigation { } /* ID (самый быстрый) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Класс */
ul li a.current { } /* Класс *
ul { } /* Тег */
ul li a { } /* Тег */
* { } /* Универсальный (самый медленный) */
#content [title='home'] /* Universal */ Затем мы объединяем концепции селекторов справа налево и целевых селекторов, и мы можем знать, что следующий селектор неэффективен:
#main-nav > li { } /* Выглядит быстро, но на самом деле очень медленно*/
Хотя это немного сбивает с толку... поскольку идентификаторы являются наиболее эффективными, браузеры могут быстро найти li по идентификаторам. Но дело в том, что тег li читается первым.
Не изменяйте его с помощью тегов
Не делайте этого насмерть:
ul#main-navigation { }
Идентификаторы уникальны, поэтому их не нужно украшать тегами, что делает его менее эффективным.
Не используйте его для изменения классов, если этого можно избежать. Класс не уникален, поэтому теоретически его можно использовать в разных тегах. Если вы хотите, вы можете использовать теги для управления различными стилями, поэтому вам могут потребоваться модификации тегов (например: li.first), но мало кто делает это, поэтому не делайте этого.
Нет ничего хуже, чем использовать селектор потомков
Дэвид Хаятт:
Селектор-потомок — самый дорогой селектор в CSS, и он непомерно дорог, особенно если его размещать после тегов и универсалий.
Как и следующие вещи, это абсолютный рак эффективности:
HTML-тело ul li a { }
Для селектора более эффективно не отобразиться, чем для селектора, который будет отображаться.
Я не уверен, есть ли более убедительные доказательства этого, потому что если у вас много селекторов, которые невозможно найти в таблице стилей CSS, это может показаться странным, но важно отметить, что справа налево. Перефразируя селектор , как только он не может его найти, он прекращает попытки. Однако, если он будет найден, то для объяснения потребуется больше усилий.
Просто подумайте, почему вы пишете такой селектор
Подумайте об этом:
#main-navigation li a {font-family: Georgia, Serif };
Вероятно, вам не нужно начинать с селектора (если вы просто хотите изменить шрифт). Это может быть более эффективно:
#main-navigation {семейство шрифтов: Georgia, Serif };
Практичность
Также выгравирована упомянутая ранее статья Mozilla? Прошло десять лет. Факт таков: компьютеры работают медленнее, чем десять лет назад (не то чтобы я неправильно понял или автор хочет сказать, что нынешний Интернет становится все более и более сложным). Мне кажется, тогда к этому вопросу относились более серьёзно. Десять лет назад я был красивым 21-летним парнем. Конечно, я не думал, что буду там что-то знать о CSS. Поэтому я не могу рассказать вам о предыдущей ситуации... но я думаю, что причина, по которой вопрос эффективности рендеринга не воспринимался всерьез, заключается в том, что он никогда не был большой проблемой.
Вот некоторые из моих мнений: Несмотря ни на что, упомянутые выше вещи имеют смысл, и вы можете сделать это в соответствии с описанным выше методом, поскольку он не ограничивает ваше производство CSS. Но не нужно быть слишком догматичным. Если вы перфекционист и раньше не задумывались об этом, пришло время пересмотреть некоторые стили, которые вы написали ранее, чтобы увидеть, есть ли возможности для улучшения. Если вы не заметили, что ваш веб-сайт явно работает медленно, не обращайте на него слишком много внимания. Просто уделите этому больше внимания в будущей работе.
Супер быстро и нулевая практичность
Мы знаем, что идентификаторы являются наиболее эффективными селекторами. Если вы хотите максимизировать скорость рендеринга, вы можете настроить идентификатор для каждого отдельного тега, а затем использовать эти идентификаторы для написания стилей. Это было бы супер быстро и супер смешно. В результате получается чрезвычайно плохая семантика, которую чрезвычайно сложно поддерживать. Вы не должны видеть, как это делается даже в самой сути. Я думаю, это служит напоминанием о том, что не стоит отказываться от семантики и удобства сопровождения ради эффективного CSS.
Спасибо Джейсону Бодуану за то, что он написал мне об этой идее. Если кто-нибудь знает больше об этом материале или у вас есть дополнительные советы, которые вы можете использовать в том же духе, давайте послушаем!
Кстати, поскольку селекторы CSS используются во многих библиотеках JavaScript, упомянутые выше вещи по-прежнему применимы, селектор ID по-прежнему самый быстрый, а селекторы-потомки и подобные вещи медленнее.
PS : Посмотрим, кто осмелится использовать больше N селекторов потомков. . . Есть также люди, которые возражают против использования мной удостоверения личности. . . Вау хаха. . .