通配选择器在recalculate style阶段显著拖慢性能，尤其dom节点超500个时，单条{box-sizing:border-box;}可能使该阶段耗时超20ms，延迟fcp；它强制全量扫描所有节点（含伪元素），无法剪枝，破坏原生控件布局语义，并放大其他选择器开销。
通配选择器 * 不拖慢下载或解析，但会让浏览器在 Recalculate Style 阶段卡住——尤其是 DOM 节点超 500 个时，单条 * { box-sizing: border-box; } 就可能让该阶段耗时突破 20ms，直接延迟首次内容绘制（FCP）。
浏览器匹配 * 是从右往左、且无法跳过任何节点
浏览器不按你写的顺序去“找父容器再钻进去”，而是先抓所有 DOM 节点，挨个问：“这条 * 规则要不要应用到你身上？” 这包括：<script></script>、<meta>、HTML 注释、甚至 ::before 和 ::after 生成的伪元素节点。
- 没有索引：不像
.btn或#header可以哈希快速定位，*强制全量扫描 - 无法剪枝：哪怕某个子树是
display: none，现代引擎能跳过渲染，但样式计算仍要走一遍 -
*::before更危险：1 个元素 → 2 个匹配目标 → 500 个元素实际处理约 1500+ 次
* { margin: 0; padding: 0; } 看似重置，实则破坏原生交互
它用最低特异性覆盖一切，但代价是让大量原生控件失去默认布局语义，后续还得手动补救，形成恶性循环。
-
<input type="text">失去内边距 → 点击热区收缩，移动端难触发 -
<select></select>高度塌缩，下拉箭头错位 -
<svg></svg>的viewBox失效，图标被压缩变形 - 第三方组件（如
react-datepicker）依赖默认margin布局，加了*后弹窗立刻偏移
真正影响性能的不是“用了 *”，而是它放大了其他选择器的开销
* 本身不慢，但它阻断浏览器对继承值的复用和样式缓存，导致后续所有同级规则都要重新验证是否被它覆盖。
-
html { font-size: 16px; }本可自然继承，但* { font-size: 14px; }强制每个节点重算 -
.nav * span这类组合更糟：先扫全部节点，再对每个节点检查后代路径，开销线性增长 -
*[data-tip]或div * [type="text"]让属性匹配也变成全量遍历，[type="text"]单独用很快，嵌套后 layout 耗时可跳到 4.7ms+
最隐蔽的问题往往不在首屏加载时，而在用户开始滚动、hover 或输入时——那些高频触发的重排重绘，会反复跑整条匹配链。别只盯着 DevTools 里 Recalculate Style 的峰值，更要观察它是否在交互过程中持续抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
