我正在构建一组 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,我可以随时使用谷歌浏览器分析器。