使用单类名或ID选择器可显著提升querySelector效率，因浏览器从右向左匹配，深层嵌套需多次回溯，5级嵌套比单类名慢3–5倍；BEM命名与缓存查询结果等策略进一步优化性能。
直接用单类名或 ID 选择器，避免后代嵌套，是提升 querySelector 检索效率最有效的方式。浏览器匹配 CSS 选择器从右向左执行，层级越深，回溯路径越长，尤其在低端设备上，5 级嵌套比单类名慢 3–5 倍。
优先使用高效率基础选择器
类名（.btn）、ID（#header）和标签名（button）是解析最快的选择器类型。它们可被浏览器引擎快速索引，无需遍历父级验证。
- ✅ 推荐：
document.querySelector('.modal-close-btn')—— 单一语义类名，无嵌套 - ✅ 推荐：
document.querySelector('#user-form')—— ID 唯一且查找极快 - ❌ 避免：
document.querySelector('.modal.is-open .close-btn')—— 多层结构触发多次向上验证
用命名约定替代 DOM 层级依赖
BEM 类名（如 .card__title、.list-item--active）让样式与结构解耦，既保持语义清晰，又消除对父容器的匹配依赖。
- 把
.card .card__header .card__title改为.card__title - 把
nav ul li a改为.nav-link，哪怕多写一个 class，也远快于标签+后代组合 - 预处理器中慎用嵌套语法（如 Sass 的
&__item），编译后若生成多层后代选择器，一样拖慢速度
警惕“看似简单”的低效写法
有些选择器写法短，但内部开销大，容易被忽略：
立即学习“前端免费学习笔记（深入）”；
-
.btn:not([disabled])：虽然只有两层，但:not()内部需重新全量扫描，等价于两次匹配 -
input[type="text"].form-control：属性选择器本身比类选择器慢，叠加条件不提速，反增分支判断 -
div ul li a：纯标签+后代组合，无索引支持，在大型 DOM 中性能急剧下降
服务端或批量操作时的特别优化
在 Node.js（如 jsdom）、爬虫（BeautifulSoup .select()）或 SSR 场景中，选择器解析由非浏览器引擎完成，但同样遵循从右向左逻辑，优化原则一致：
- 用
[data-id]替代深层类嵌套，虽略慢于 class，但稳定性高、易维护 - 避免在循环中反复调用
document.querySelectorAll('.item')，应提前缓存结果 - 若 HTML 结构不可控（如 CMS 输出），考虑用 XPath 替代复杂 CSS 选择器——
css-to-xpath工具转换后，交由document.evaluate()执行更可控、更高效
