CSS 正则表达式 id 选择器与类选择器的性能

Posted

技术标签:

【中文标题】CSS 正则表达式 id 选择器与类选择器的性能【英文标题】:Performance of CSS regex id selector vs class selector 【发布时间】:2017-07-24 12:40:15 【问题描述】:

假设我有第 2000 页的元素。我想从自定义模块中注入此页面元素(横幅)。该模块的 css 文件有 300+ 个 css 选择器,每个选择器需要有唯一的动态前缀,以避免与同一页面内的其他模块发生冲突。我不能使用 1 个唯一的 id 选择器,因为可以加载更多横幅,所以我需要使用这样的东西:

<div id="company_banner14"></div>
<div id="company_banner15"></div>
div[id^='company_banner']


<div id="company_banner14" class="company_banner"></div>
<div id="company_banner15" class="company_banner"></div>
.company_banner


从性能角度看什么更好?使用正则表达式选择器是不好的做法,300 个正则表达式选择器会产生明显的性能影响吗?

【问题讨论】:

好问题,我也对此感兴趣。 如果你不打算使用类选择器,那么拥有类属性有什么意义呢?尤其是当你谈论性能时。只是看起来……很奇怪。 你是对的,这是我的错误,我修改了问题。 正则表达式匹配比简单的基于类的匹配要慢。 github.com/CSSLint/csslint/wiki/… 我希望有一些关于性能影响的信息 【参考方案1】:

查看完您需要的是为所有元素定制 CSS。对于这个查询,有几点需要牢记。

    使用内联 CSS- 我认为如果您不为一个元素使用长 CSS,内联 CSS 是最好的解决方案。如果您的循环元素太多,它会为您的页面节省非常宝贵的代码量。例如,&lt;div id="company_banner15" class="company_banner" style="Width:x; height:y;"&gt;&lt;/div&gt;

    使用 CSS 类- 这是内联 CSS 的替代方式,但不像内联 CSS 那样节省代码。如果您对所有元素使用相同类型的样式,那么如果您在循环中使用不同类型的样式,则不是正确的。

希望这些建议能够指导您。谢谢和欢呼。

【讨论】:

会有 300 个不同的选择器,因为每个 div 都会有更多的元素。对 300 多个元素使用内联 css 是不行的。问题只是对里面的 300 个元素使用类选择器或 id 正则表达式选择器是否更好。内部的每个元素都需要定义父选择器以避免任何冲突。

以上是关于CSS 正则表达式 id 选择器与类选择器的性能的主要内容,如果未能解决你的问题,请参考以下文章

初入web知识点

CSS选择器与优先级详解(一)

CSS3新增的哪些选择器和常见的属性是哪些?

根据ID选择器与类选择器控制指定插件生成的表格等的样式(高度,宽度,颜色。。。)

根据ID选择器与类选择器控制指定插件生成的表格等的样式(高度,宽度,颜色。。。)

用sass选择器嵌套的时候,如何表示直接子元素