表现：是空格还是＆gt; CSS速度更快？

Question

在CSS中，处理速度更快，空格或>？

例如：

#test > *

VS

#test *

（显然，它们有不同的含义，但在许多情况下它们可以互换使用。）

Answer 1

如果你有嵌套的子元素，我的理论是#test1 > *会更快，否则应该是相同的：

#test > *会将所有直接孩子选为#test。

#test *将选择

中的所有元素

  

我们将首先使用此网站进行一些测试：CSS Test Creator

     

TEST 1 - 页面加载时间（内部所有元素都是直接子项）：#id * VS #id > *（100000 CSS规则，10000个锚点）

#id * (page load time)

5134 5103 4961 5039
4917 5152 5021 5203
5171 4956 5066 4946
4865 4935 5148 5162
5051 5058 4734 5186

TOTAL: 100808
AVG page load time: 5040.4

#id > * (page load time)

4922 5065 4916 5013
5146 5185 5197 5038
5071 5185 5021 5224
4768 5168 5099 5188
5206 5111 5155 5077

TOTAL: 101755
AVG page load time: 5087.75

#id *：平均5040.4毫秒 Link to the test 1 case 1

#id > *：平均5087.75毫秒 Link to the test 1 case 2

TEST 2 - 页面加载时间（嵌套子级）：#outerdiv * VS #outerdiv > *（100000 CSS规则，5000个锚点）

#outerdiv * (page load time)

4649 4170
4965 4544
4389 3924
4568 4647
4198 5133

TOTAL: 45187
AVG page load time: 4518.7

#outerdiv > * (page load time)

1687 1634
1341 1475
1221 1782
1648 1759
1777 1723

TOATL: 16047
AVG page load time: 1604.7

#outerdiv *：平均4518.7毫秒Link to the test 2 case 1

#outerdiv > *：平均1604.7毫秒Link to the test 2 case 2

好的，发生了什么？

情况1：里面的所有元素都是直接的孩子。 （6个元素，1个CSS规则）

#test1 > * {
  background: aqua;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test1">
  <div>child div1</div>
  <div>child div2</div>
  <div>child div3</div>
  <div>child div4</div>
  <div>child div5</div>
</div>

#test1 > * : 6 match attempt happened, got 5 matches 1 fail

#test1 * {
  background: lightgreen;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test1">
  <div>child div1</div>
  <div>child div2</div>
  <div>child div3</div>
  <div>child div4</div>
  <div>child div5</div>
</div>

#test1 * 6 match attempt happened, got 5 matches 1 mismatch

所有孩子都匹配两种情况 对于

，CSS应用了5次，因此工作负载相同

元素的性能应该相同，只有直接子元素。

情况2：里面的元素是嵌套的子元素（5个元素，1个CSS规则）

基于CSS选择器的工作原理（从右到左匹配选择器），在这种情况下

#test2>* {
  background: aqua;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test2">
  <div>child div1
    <div>child div2
      <div>child div3
        <div>child div4</div>
      </div>
    </div>
  </div>
</div>

#test1 > *发生了5次匹配尝试，得到1次匹配4次不匹配

#test2 * {
  background: lightgreen;
  padding: 10px;
  display: inline-block;
  border: 1px solid black;
}

<div id="test2">
  <div>child div1
    <div>child div2
      <div>child div3
        <div>child div4</div>
      </div>
    </div>
  </div>
</div>

#test1 * 5场比赛尝试发生，得到4场比赛1次不匹配

不匹配比匹配更快，因为没有css工作要做。因此，在这种情况下，嵌套子元素#test1 > *比#test1 *更快。

这证明了我关于＃test1＆gt;的理论如果你有嵌套的子元素，*会更快，否则应该是相同的

  

浏览器如何读取选择器？

     

div.nav > ul li a[title]

     

浏览器看到上面的选择器将首先尝试匹配html中的[title]，然后继续向左匹配li，ul，最后是div.nav。

     

选择器的最后一部分（在本例中为[title]）被称为“键选择器”，它最终将决定选择器的效率。

     

浏览器越早筛选出不匹配，就越需要检查，选择器的效率就越高。关于Mozilla的选择器性能的David Hyatt写道：

     

这是显着提高性能的关键。检查给定元素所需的规则越少，样式分辨率就越快。   由于失败的选择器比相同的选择器匹配更有效，我们希望优化键选择器失败。键选择器越具体，浏览器找到不匹配的速度就越快。

参考：http://vanseodesign.com/css/css-selector-performance/

Answer 2

我希望您的意思是访问测试的某些元素。

#test > *, this will access directly the immediate children and
#test* will access any element present inside up to the nth depth 

这就是为什么#test＆gt; *会更快并且会获取即时结果。