运行时,一个HTML文档会被解析成一个DOM树,其中包含平均深度为D
的N
个元素。同时,应用的样式表中共有S
个CSS规则。
Elements' styles are applied individually meaning there is a direct relationship between N
and overall complexity. Worth noting, this can be somewhat offset by browser logic such as reference caching and recycling styles from identical elements. For instance, the following list items will have the same CSS properties applied (assuming no pseudo-classes such as :nth-child
are applied):
<ul class="sample">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Selectors are matched right-to-left for individual rule eligibility - i.e. if the right-most key does not match a particular element, there is no need to further process the selector and it is discarded. This means that the right-most key should match as few elements as possible. Below, the p
descriptor will match more elements including paragraphs outside of target container (which, of course, will not have the rule apply but will still result in more iterations of eligibility checking for that particular selector):
.custom-container p {}
.container .custom-paragraph {}
Relationship selectors: descendant selector requires for up to D
elements to be iterated over. For instance, successfully matching .container .content
may only require one step should the elements be in a parent-child relationship, but the DOM tree will need to be traversed all the way up to html
before an element can be confirmed a mismatch and the rule safely discarded. This applies to chained descendant selectors as well, with some allowances.
On the other hand, a >
child selector, an +
adjacent selector or :first-child
still require an additional element to be evaluated but only have an implied depth of one and will never require further tree traversal.
The behavior definition of pseudo-elements such as :before
and :after
implies they are not part of the RTL paradigm. The logic the assumption is that there is no pseudo element per se until a rule instructs for it to be inserted before or after an element's content (which in turn requires extra DOM manipulation but there is no additional computation required to match the selector itself).
I couldn't find any information on pseudo-classes such as :nth-child()
or :disabled
. Verifying an element state would require additional computation, but from the rule parsing perspective it would only make sense for them to be excluded from RTL processing.
#gb {}
#gbz, #gbg {}
#gbz {}
#gbg {}
#gbs {}
.gbto #gbs {}
#gbx3, #gbx4 {}
#gbx3 {}
#gbx4 {}
/*...*/
^ - 虽然从渲染引擎性能的角度来看这是正确的,但总会存在其他因素,如流量开销和DOM解析等。
::before
和 ::after
)都受到相同的规则约束,它们只能应用于选择器的主体,并且只有在选择器匹配完成后才会被评估 - http://www.w3.org/TR/selectors/#pseudo-elements 从 CSS1 到 CSS3,这始终是关键选择器; 然而在 CSS4 中可能会发生改变。 - BoltClock:first-child
引用的缓存。 - Oleg