*通配符和超过3层的嵌套选择器（如.layout .main .content .article p）是当前主流浏览器中开销最高的两类写法，尤其在dom节点超500个时，recalculate style时间可能突破20ms，直接拖垮帧率。
直接说结论：* 和超过 3 层的嵌套选择器（如 .layout .main .content .article p）是当前主流浏览器中开销最高的两类写法，尤其在 DOM 节点超 500 个时，Recalculate Style 时间可能突破 20ms，直接拖垮帧率。
为什么 * 通配符会显著拖慢渲染
浏览器对 * 没有任何索引可依，必须遍历页面每一个节点做匹配。哪怕只是写了一条 * { box-sizing: border-box; }，它也会在每次样式计算时强制扫描全部元素——包括 script、meta、svg 等非渲染节点。
常见错误现象：
- 页面滚动卡顿，DevTools Performance 面板里
Recalculate Style占比异常高 - 在 Shadow DOM 或 Web Components 中，
*还会跨边界触发封装检查，开销翻倍
替代方案：
- 用
*, *::before, *::after改为显式列举：html, body, div, p, span, h1, h2, h3, h4, h5, h6, ul, ol, li, a, button, input, textarea - 全局重置优先用
html或:where(*)（注意：:where(*)不提升性能，但能降权避免意外覆盖） - 现代项目可直接用
box-sizing: border-box在根元素上设置，再用继承传递，无需通配
深层嵌套选择器的实际性能代价
浏览器从右往左匹配，.a .b .c .d 的意思是：“先找所有 .d，再逐个向上查是否在 .c 内，再查 .c 是否在 .b 内，最后查 .b 是否在 .a 内”。每多一层，回溯路径就指数级增长。
典型问题场景：
- 虚拟滚动列表中 hover 某项，触发整组
.list .item .content .title:hover重算，FPS 瞬间掉到 20 以下 - 移动端低端 Android 设备上，
.modal .overlay .dialog .header .title比.dialog__title慢 3–4 倍 - Sass 中误用嵌套语法：
.modal { &__content { &__title { ... } } }编译后仍是.modal__content .modal__title，没解决问题
实操建议：
- 严格限制层级 ≤ 3，例如
.card .header .title可接受，.page .section .wrapper .content .body p必须拆解 - 用 BEM 时确保 HTML 直接写
class="card__title"，而非<div class="card"><h2 class="card__title"></h2></div>后再写.card .card__title - 搜索残留嵌套：构建后执行
grep -r "\.[a-z]\+ \.[a-z]" dist/，快速定位带空格的类组合
哪些“看似安全”的写法其实也危险
不是只有 * 和四层嵌套才危险。以下写法在高频更新区域（如动画容器、实时表格）同样容易出问题：
-
[type="text"]：需对每个input读取属性值并字符串比对，比.input-text慢一个数量级 -
:nth-child(odd)：父容器子节点结构一变（比如 JS 插入一个span），整组匹配结果都要重算，且无法缓存 -
div.card：比.card慢，因浏览器要先找所有.card，再向上验证父节点是否为div -
.parent + .child和.parent ~ .child：需遍历兄弟链，且引擎无法高效缓存匹配结果
关键判断点：只要最右边的选择器不是纯类名或 ID，且左侧有依赖结构的限定，就要警惕。
真正难的不是写出扁平选择器，而是让团队所有人编译后不产出带空格的 CSS —— 这需要构建时校验（如 stylelint 规则）、Code Review checklist，以及把 .card__title 当成不可分割的原子来对待，而不是“.card 下的标题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
