* css选择器的实际性能影响是什么？

Question

  

可能重复：
  What is the performance impact of CSS’s universal selector?

我已经读到使用* CSS选择器并不理想，因为它需要更长的时间来处理。不过，这真的是一个问题多少钱？如果我在CSS中有以下内容，页面显示需要多长时间？

#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important; 
}

在我看来，像图像这样的大型资产的连接速度和数量将会产生更大的差异。我正在做的工作是针对移动优化，但页面大小（由于各种库）大约为750KB，我无能为力。

作为旁注，我知道使用！important也不理想，但是我继承的凌乱代码意味着它在这种情况下是必需的。

Answer 1

Read this article.

  

优化CSS选择器的关键是专注于最右边的   选择器，也称为键选择器（巧合？）。这里有很多   更昂贵的选择器：A.class0007 * {}。虽然这个选择器   可能看起来更简单，浏览器匹配的成本更高。

     

因为浏览器从右向左移动，所以它首先检查所有内容   与键选择器“*”匹配的元素。这意味着浏览器必须   尝试将此选择器与页面中的所有元素进行匹配。