根本原因是*强制浏览器对每个DOM节点做无索引、不可剪枝的全量样式检查；它无语义、无索引，破坏缓存机制，且在动态操作中反复触发高开销计算。
通配符 * 在大项目中拖慢性能，根本原因不是“多匹配几个元素”，而是它强制浏览器在每次样式计算时对每个 DOM 节点做无索引、不可剪枝的全量检查。
为什么 * 无法跳过任何节点？
浏览器匹配 CSS 是从右往左的，而 * 没有索引能力，也不携带语义信息。这意味着：
- 哪怕页面里只有 1 个
<script></script>或 1 条 HTML 注释，*都得检查它是否要应用样式 - 现代引擎虽能跳过
display: none子树，但对、、伪元素生成节点（如*::before）仍照单全收 - DOM 节点超 500 个时，单条
* { box-sizing: border-box; }就可能让 Recalculate Style 阶段突破 20ms，直接卡住 FCP
* 会破坏浏览器的样式缓存机制
浏览器靠“已知父级继承链”和“选择器匹配结果复用”来加速后续计算，但 * 让这套逻辑失效：
-
html { font-size: 16px; }本可自然继承，但* { font-size: 14px; }强制重算每个节点的 font-size 值 - 后续同级规则（如
.card p）无法安全缓存匹配结果——浏览器得先排除*的干扰，才能确认该缓存是否有效 -
*::before更危险：1 个元素 → 生成 2 个伪节点 → 实际匹配目标翻倍；500 个节点就变成 1500+ 个目标
大项目里 * 的副作用比性能更隐蔽
它不只影响首次渲染，还会在动态场景中反复触发高开销计算：
-
body * { line-height: 1.6; }—— 每次插入新段落、切换暗色模式、甚至调用innerHTML = ...都会重匹配整个body子树 - 第三方组件（如
react-datepicker）依赖默认 margin/padding 布局，* { margin: 0; padding: 0; }一加，弹窗立刻偏移或高度塌缩 -
* { user-select: none; }连和代码块都不可复制，上线后才发现用户反馈“粘贴不了”
真正棘手的不是 * 本身，而是它常藏在 reset.css 末尾、被当成“安全默认”悄悄引入；等项目 DOM 达到 10k 节点，再想定位哪条规则拖慢 Recalculate Style，就得靠 Performance 面板逐帧抓取 + Coverage 查未使用 CSS —— 此时改起来已远不止删一行那么简单。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
