通用选择器会影响性能吗_在大页面中如何合理使用_网络技术

通用选择器 * 严重拖慢渲染性能，因需遍历所有 DOM 元素匹配，导致首屏延迟10–30ms；应改用精准标签重置、all: unset 或 box-sizing 优化，避免嵌套与低效组合。

浏览器解析 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 是现代替代方案：它把元素还原为无样式初始状态，且只作用于声明该规则的元素及其后代，不会触发全树遍历。兼容性上，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 替代 art icle 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 错误会直接报红，而是在用户滑动卡顿、动画掉帧时才暴露。