Есть два важных, но нелогичных принципа, о которых следует помнить, думая о производительности селектора:
Механизм сопоставления правил разработан на основе предположения о том, что в нем будет гораздо больше элементов.быть сопоставленным с правилами для сопоставления, и что только несколько правил будут применяться к любому данному элементу.
Механизм сопоставления правил не проходит полностьюпостроил дерево DOM из корня для каждого правила.Скорее, он просматривает список правил для каждого элемента , поскольку он анализируется и добавляется в DOM.
Из-за этого производительность селектора падает примерно на трикатегории.Если можно решить, соответствует ли правило какому-либо данному элементу, просматривая только сам элемент и его атрибуты, а не его содержимое или его связь с другими элементами в дереве, сопоставление будет очень быстрым.Селекторы #id, .class, tagname, [attr] и т. Д. Относятся к этой категории.Вторая наиболее эффективная категория - это когда решение может быть принято только на основе элемента и его родителей, таких как #foo bar или .foo > .bar.В худшем случае это занимает время, пропорциональное глубине элемента в дереве DOM, которая обычно не так велика.Все остальное медленнее, потому что это связано с более сложным обходом DOM, и потому что оно не было оптимизировано так много в реализации.
#example может быть сопоставлено, если смотреть только на сам элемент, которыйочень быстро.Но div:nth-of-type(1) требует обхода списка предыдущих братьев и сестер элемента, что неэффективно.
Поэтому, если вам сказали, что #example быстрее, чем div:nth-of-type(1) дляпоказан фрагмент HTML и CSS, тогда это было правильно.В таком маленьком документе это не будет большой проблемой, но в большом документе с большим количеством элементов <div> это может стать проблемой.