"[选择器] > *"真的很慢吗？"

Question

我正在构建一组 JavaScript (jQuery) 插件，我想确定的一件事是这些插件所有元素都使用 box-sizing: border-box（是的，我知道这意味着我只能支持 IE 8 或更高版本，我也没问题）。

我听说用 [selector] > * 这种方式非常慢，但它到底有多慢呢？

我的意思是，仅针对一个小部件，我就有了这个选择器，以确保所有元素都具有正确的盒模型：

.jg-grid-wrap,
.jg-grid-content-outer-wrap,
.jg-grid-colum-actions a,
.jg-grid-content-wrap,
.jg-grid-wrap .hide,
.jg-grid-wrap ul,
.jg-grid-wrap ul li,
.jg-grid-header-wrap,
.jg-grid-header-wrap li,
.jg-grid-header-wrap .sort-indicator,
.jg-grid-row,
.jg-grid-row li,
.jg-grid-footer-wrap,
.jg-grid-footer-wrap .column-selection
.jg-grid-wrap .controls,
.jg-grid-wrap .controls .first-page-link,
.jg-grid-wrap .controls .previous-page-link,
.jg-grid-wrap .controls .next-page-link,
.jg-grid-wrap .controls .last-page-link,
.jg-grid-wrap .controls .column-selection-link,
.jg-grid-wrap .controls .set-page-link,
.jg-grid-wrap .controls .total-page-count,
.jg-grid-wrap .controls .record-counts,
.jg-grid-wrap .controls .record-display-text
{
    box-sizing: border-box;
}

但是更小更简单的方法就是直接写：

.jg-grid-wrap *
{
    box-sizing: border-box;
}

此外，如果我添加了一个元素，现在我必须记得将其添加到巨大的选择器中，而使用星号选择器，我就不必担心这个问题。是否真的值得我列出每个可能的元素，因为 [selector] > * 真的很慢吗？

更新：最终，我只会选择：

[class^=jg-] *
{
    box-sizing: border-box;
}

这个选择器在谷歌浏览器中占总时间的约14％。其他选择器稍微小一些（约4％），但考虑到CSS可能是我最后需要担心性能的地方（我的JavaScript和服务器端代码将是瓶颈的主要原因）。如果我真的需要优化我的CSS，我可以随时使用谷歌浏览器分析器。

- ryanzec

---

根据答案更新了选择器，因为我真的不想要这个 > 符号。 - ryanzec

Answer 1

如果你确实想要容器下标记为该类的所有元素，你应该使用

.jg-grid-wrap *

< p > > 运算符将匹配限制为直接子元素。 < /p > < p > 性能影响是因为它意味着在相关方式更新布局时，必须测试每个元素。您可以通过以下方式稍微改善：< /p >

.jg-grid-wrap div, .jg-grid-wrap form, .jg-grid-wrap ul

等等，还有其他块级元素。 (也就是说，您是否真的关心 <span> 标签是否具有 "box-sizing" 属性?)

Chrome 的 CSS 分析器可以很好地帮助您找到耗时的 CSS 规则。在过度担心之前，这应该是您实证调查的事情；现代 CSS 引擎非常快。

- Pointy

Answer 2

当页面被（重新）绘制时，浏览器会从右到左评估CSS：

.jg-grid-wrap > *

这将基本上匹配页面上的所有元素; 然后它检查所有元素的直接祖先并比较类。

尽管听起来很糟糕，但情况可能更糟：

.jg-grid-wrap *

对于 .jg-grid-wrap 下的元素来说，情况还不错，但其他元素会导致浏览器遍历整个元素树直到 html 找到祖先。

其中一些逻辑可以进行优化，但最好还是避免这种情况。因此，诀窍在于使 CSS 规则的最右侧尽可能具体。

所以我的结论是：不要动代码，对人眼来说最优的代码可能对可怜的浏览器来说是灾难性的 :)

- Ja͢ck