是，通配符选择器*会拖慢页面渲染，主要影响CSS匹配和样式计算，尤其在DOM节点多、深度大时；它阻止浏览器优化，还降低同级选择器匹配效率。
通配符选择器 * 真的会拖慢页面渲染吗
会，但不是在“JS 执行慢”那种直观意义上。它主要拖慢的是 CSS 选择器匹配阶段和样式计算，尤其在 DOM 深度大、节点多时，浏览器需要为每个元素都尝试匹配 *，哪怕你只写了一条 * { box-sizing: border-box; }。
更隐蔽的问题是：它会阻止浏览器对某些样式做优化（比如跳过继承链判断），还会让后续同级选择器的匹配变慢——因为浏览器必须确保没有更高优先级的 * 规则覆盖它。
* 和 *::before / *::after 的性能差异很大
单独用 * 已经不推荐，但加上伪元素后问题更严重：浏览器不仅要遍历所有元素，还要为每个元素额外生成并匹配两个伪元素节点。这意味着一个 500 节点的页面，实际要处理 1500+ 个匹配目标。
-
*匹配所有元素节点 -
*::before会让浏览器为每个元素强制创建伪元素（即使没内容），再逐个匹配 - 若同时写了
* { margin: 0; }和*::before { content: ""; }，两者都会触发重排/重绘风险
替代 * 的安全写法有哪些
真正需要“全局归一化”的场景（如重置盒模型），应限定作用域、避免污染全局，且优先用更明确的选择器。
立即学习“前端免费学习笔记（深入）”；
推荐方案：
- 用
html或body作为根选择器：html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; } - 用属性选择器缩小范围：
[class] { margin: 0; }比*精确得多，也更容易被浏览器跳过无 class 的元素 - 现代项目直接用
all: unset;配合局部重设（注意兼容性：IE 不支持，iOS Safari 15.4+ 才稳定）
/* 推荐：精准控制，且可被浏览器快速索引 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}如何确认你的 CSS 里有没有隐性 * 性能陷阱
很多框架或 UI 库（比如旧版 Normalize.css、某些 reset.css）会在底层偷偷用 *。光看自己写的代码不够，得查最终生效的样式表。
实操建议：
- 打开 Chrome DevTools → Elements → 右键任意元素 → “Inspect styles”，搜索
*（注意勾选“Show all”） - 在 Coverage 标签页（
Cmd+Shift+P→ “Coverage”）中 reload 页面，查看哪些 CSS 规则是“未使用但被解析”的，*类规则常列其中 - 用 Puppeteer 或 Playwright 写脚本提取所有 CSSRule 中的
selectorText，过滤含"*"且非注释行的规则
真正麻烦的不是你写了几个 *，而是它让整个选择器引擎失去剪枝能力——这点容易被忽略。
