面试题：CSS基本选择器：通用选择器的性能考量

Question

通用选择器（*）在CSS中具有广泛匹配的功能，但同时也可能带来性能问题。请详细分析通用选择器在不同场景下对性能的影响，以及如何在使用通用选择器时优化页面性能。

Answer 1

通用选择器在不同场景下对性能的影响

1. 匹配范围广泛：通用选择器 * 会匹配文档中的所有元素，包括所有标签、伪元素等。这意味着浏览器在渲染页面时，需要对页面上的每一个元素都应用该选择器定义的样式。在页面元素数量较多时，会显著增加浏览器计算样式的工作量，从而影响性能。例如，一个有上千个元素的页面，若使用通用选择器设置字体样式，浏览器需对每个元素都进行样式计算。
2. 特异性低：通用选择器的特异性非常低。当存在多个样式规则冲突时，特异性高的选择器会覆盖通用选择器的样式。这就导致浏览器在计算最终应用到元素的样式时，需要进行更多的比较和判断，增加了计算成本。比如一个元素同时匹配通用选择器和类选择器，浏览器要判断哪个选择器的特异性更高以确定最终样式。
3. 继承关系影响：如果通用选择器应用的样式是可继承的（如字体相关样式），它会通过文档树层层传递，导致大量元素受影响。浏览器在计算这些继承样式时也会消耗额外性能。而对于不可继承样式（如边框样式），每个元素都要单独计算应用，同样增加性能开销。

使用通用选择器时优化页面性能的方法

1. 限制使用范围：尽量避免在全局使用通用选择器。可以将其应用范围限定在特定的 DOM 子树内。例如，只在某个具有特定类名的容器元素内部使用通用选择器。如 .specific - container * { color: red; }，这样就只对具有 specific - container 类的容器内的元素应用样式，大大减少了匹配元素的数量。
2. 结合其他选择器：将通用选择器与更具体的选择器结合使用，提高特异性和匹配效率。比如 body div * { font - size: 14px; }，这种写法比单独使用通用选择器更具针对性，浏览器可以更快地定位到要应用样式的元素。
3. 避免频繁重排重绘：当使用通用选择器改变元素样式时，尽量避免引起频繁的重排和重绘。例如，不要在短时间内多次改变通用选择器定义的影响布局的样式（如宽度、高度等）。可以先修改元素的 class，一次性应用新的样式，而不是直接通过通用选择器频繁修改单个样式属性。
4. 性能测试与监控：使用浏览器提供的开发者工具（如 Chrome DevTools 的 Performance 面板）对页面性能进行测试，观察使用通用选择器前后页面渲染时间、帧率等性能指标的变化。根据测试结果，针对性地优化通用选择器的使用或调整样式规则。