[selector]>*真的那么慢

Question

所以我正在构建一组JavaScript(jQuery)小部件,我想确定这些小部件的所有元素都在使用box-sizing: border-box(是的,我知道这意味着我只能支持8或更高版本的IE版本我很好).

现在我听说做一个[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] > *它真的很慢吗？

UPDATE

最后,我只想去:

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

根据谷歌浏览器,此选择器占总共4毫秒的约14%.其他有点小(约4%),但考虑到它,CSS将是我可能需要担心性能的最后一个地方(我的javascript和服务器端代码将是瓶颈的大部分).如果我真的需要优化我的CSS chrome profiler就在我需要的时候.

Answer 1

如果您真的希望容器下的所有元素都标有该类,那么您需要

.jg-grid-wrap *

该>运营商限制了比赛的直接孩子.

性能影响源于这样一个事实,即当布局以相关方式更新时,必须测试每个元素.您可以通过以下方式使其更好一些:

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

等等,你真正关心的任何块级元素.(也就是说,如果你的<span>标签有"盒子大小"属性,你真的在​​乎吗？)

Chrome的CSS探查器在查找昂贵的CSS规则方面非常有用.这应该是你在考虑过多之前根据经验进行调查的; 现代CSS引擎非常快.