<p>通用选择器 * 严重拖慢渲染性能，因需遍历所有 DOM 元素匹配，导致首屏延迟10–30ms；应改用精准标签重置、all: unset 或 box-sizing 优化，避免嵌套与低效组合。</p>
通用选择器 * 确实会拖慢渲染性能
浏览器解析 CSS 时，* 会匹配页面中所有节点，强制引擎对每个 DOM 元素都做一次样式匹配计算。在 DOM 节点数超 5000 的页面里，这个过程可能让首次渲染延迟 10–30ms，尤其在低端设备或旧版 Safari 中更明显。
它还会干扰 CSS 引擎的优化机制——比如 Chrome 的“快速拒绝”策略（跳过明显不匹配的选择器）对 * 完全失效，因为「所有元素都可能匹配」。
- 避免写成
* { margin: 0; padding: 0; }这类全局重置，改用更精准的标签组合（如body, h1, p, ul, li, input, button { margin: 0; padding: 0; }） - 不要嵌套使用：
div * span比div span多出一个通配层级，匹配开销指数级上升 - 构建工具（如 PostCSS）可配置
stylelint规则selector-no-universal提前拦截
真正需要「通用重置」时，优先用 all: unset
all: unset 是现代替代方案：它把元素还原为无样式初始状态，且只作用于声明该规则的元素及其后代，不会触发全树遍历。兼容性上，Chrome 37+、Firefox 27+、Safari 9.1+ 均支持；IE 完全不支持，但 IE 场景下本就不该依赖复杂 CSS 重置。
注意它和 all: initial 的区别：unset 对继承属性表现为继承，对非继承属性表现为 initial；而 all: initial 会让所有属性（包括 display）都回退到初始值，可能导致布局崩溃。
- 安全写法：
*, *::before, *::after { box-sizing: border-box; }可保留（仅影响一个属性，且现代浏览器对此有专门优化） - 慎用
all: unset在组件根节点——某些框架（如 Vue）的v-html内容可能意外被重置 - 若需兼容 IE，仍可用
normalize.css或手写精简版标签重置，而非*
大页面中更值得警惕的是「低效组合选择器」
比 * 更常被忽略的性能陷阱，是深层嵌套 + 通用/属性选择器混用，例如：article div[role="button"] > *:nth-child(2n)。这类选择器迫使浏览器从右往左匹配时，先收集所有偶数子元素，再逐层向上验证父级条件，DOM 越深、越宽，代价越高。
- 把能确定的标签名写出来：用
article footer button替代article footer > * - 避免在高频更新区域（如列表项、弹窗内容）使用
:hover+*组合（例如.list-item:hover * { opacity: 0.8; }） - 用浏览器 DevTools 的「Rendering」面板开启「Paint flashing」，观察 hover 或滚动时是否大面积闪烁——那是样式重算/重排的信号
实际项目中，性能问题往往出在「看不见的地方」
很多人盯着关键路径的 JS 执行时间，却没检查 CSSOM 构建阶段。一个未压缩的 node_modules 样式包（比如某 UI 库的完整 CSS）可能悄悄注入几十条含 * 或 [attr] 的规则，而你在自己的代码里根本没写过它们。
建议上线前跑一次 npm run build 后的最终 CSS 文件，用正则 /\*\s*{|\*\s*\+/g 搜索残留的通配符，并结合 CSS Usage 插件确认这些规则是否真被用到。
最麻烦的不是写错，而是团队协作中没人 review CSS 性能——它不像 JS 错误会直接报红，而是在用户滑动卡顿、动画掉帧时才暴露。
