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 是最好的解决方案。如果您的循环元素太多,它会为您的页面节省非常宝贵的代码量。例如,<div id="company_banner15" class="company_banner" style="Width:x; height:y;"></div>
使用 CSS 类- 这是内联 CSS 的替代方式,但不像内联 CSS 那样节省代码。如果您对所有元素使用相同类型的样式,那么如果您在循环中使用不同类型的样式,则不是正确的。
希望这些建议能够指导您。谢谢和欢呼。
【讨论】:
会有 300 个不同的选择器,因为每个 div 都会有更多的元素。对 300 多个元素使用内联 css 是不行的。问题只是对里面的 300 个元素使用类选择器或 id 正则表达式选择器是否更好。内部的每个元素都需要定义父选择器以避免任何冲突。以上是关于CSS 正则表达式 id 选择器与类选择器的性能的主要内容,如果未能解决你的问题,请参考以下文章
根据ID选择器与类选择器控制指定插件生成的表格等的样式(高度,宽度,颜色。。。)