CSS :is()伪类是否提升性能？主流浏览器引擎优化能力问询

核心结论 #

在2023年年中的主流浏览器引擎（Gecko、WebKit、Blink）中，两种写法的匹配性能差异可以忽略不计，但使用:is()的写法在代码可维护性和文件体积上更有优势。

浏览器引擎的优化能力 #

三大主流引擎都具备对重复CSS规则的内部合并优化能力：

• 对于你给出的四个独立选择器（foo baz、bar baz、foo boo、bar boo），只要它们的声明完全一致，引擎会自动将这些规则合并处理，避免重复执行相同的样式计算逻辑。
• 对于:is(foo, bar) :is(baz, boo)这种写法，引擎会将其解析为等价的选择器组合，内部处理逻辑和合并后的独立选择器几乎没有区别。

两种写法的差异分析 #

1. 文件体积：:is()写法大幅缩减了代码量，减少了CSS文件的字节数，能降低网络传输成本，这是实打实的性能优化点。
2. 匹配效率：CSS选择器的匹配是从右往左进行的，两种写法最终的匹配路径本质相同——都是匹配所有baz/boo元素，且它们的父元素是foo/bar。引擎在处理时会对这两种写法做等价的优化，不会出现明显的性能差距。
3. 可维护性：:is()写法更简洁，后续修改选择器时只需修改括号内的内容，避免了重复编辑多组规则，降低了出错概率。

注意事项 #

虽然性能上无明显差异，但:is()的优先级规则需要留意：它的优先级取括号内选择器中的最高优先级值。不过在你的示例中，所有选择器都是普通元素选择器，优先级一致，所以不存在这个问题。

内容的提问来源于stack exchange，提问作者Amazon Dies In Darkness