gpt4 book ai didi

html - #section 与 :nth-of-type(1) when Css selecting 部分

转载 作者:太空宇宙 更新时间:2023-11-04 01:03:37 24 4
gpt4 key购买 nike

有人告诉我这个,但我想确认一下。

从 HTML 中选择 CSS 的最快方法是什么?

<style>
#example{}

section div:nth-of-type(1){}
</style>

<body>
<section id="section">
<div id="example">

</div>

<div id="example2">

</div>
</section>
</body>

最佳答案

在考虑选择器性能时,请牢记两个重要但违反直觉的原则:

  1. 规则匹配引擎的设计假设是要匹配的元素比要匹配的规则多得多,并且只有少数规则适用于任何给定元素。

  2. 规则匹配引擎不会为每条规则从根开始遍历完全构建的 DOM 树。相反,它遍历每个元素的规则列表,因为它被解析并添加到 DOM。

因此,选择器的性能大致分为三类。如果可以通过仅查看元素本身及其属性(而不是其内容或它与树中其他元素的关系)来确定规则是否匹配任何给定元素,那么匹配将非常快。 #id , .class , tagname , [attr]等选择器都属于这一类。第二个最有效的类别是仅根据元素及其父元素做出决定时,例如 #foo bar.foo > .bar .在最坏的情况下,这些花费的时间与 DOM 树中元素的深度成正比,通常不是那么大的数字。其他一切都比较慢,既因为它涉及更复杂的 DOM 遍历,也因为它在实现中没有得到尽可能多的优化。

#example只看元素本身就可以匹配到,速度非常快。但是div:nth-of-type(1)需要遍历元素的先前兄弟列表,这是低效的。

因此,如果您被告知的是 #examplediv:nth-of-type(1) 快对于显示的 HTML 和 CSS 片段,那是正确的。在这么小的文档中,这没什么大不了的,但在包含许多 <div> 的大文档中元素可能会成为问题。

关于html - #section 与 :nth-of-type(1) when Css selecting 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52674002/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com