* css 选择器的实际性能影响是什么？ [复制]答案

【问题标题】：What is the practical performance impact of the * css selector? [duplicate]* css 选择器的实际性能影响是什么？ [复制]
【发布时间】：2023-03-15 15:15:02
【问题描述】：

可能重复：
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 也不理想，但我继承的凌乱代码意味着在这种情况下需要它。

【问题讨论】：

这感觉像是过早的优化：消除或减少大型资产将产生更大的影响。请记住，在移动设备上，您的处理器和内存受到限制，因此您让浏览器做的工作越少越好。

标签： css performance css-selectors

【解决方案1】：

Read this article.

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

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

【讨论】：