优化 Tab 组件 querySelector 的核心是聚焦上下文、用 data 属性替代深层类名、预存节点引用、规避伪类与动态结构陷阱。

在复杂选项卡（Tab）组件中，频繁调用 querySelector 不仅拖慢切换响应，还容易引发渲染长尾——即视觉反馈延迟、样式闪烁或部分元素未及时更新。核心问题不在“要不要选”，而在于“怎么选更稳更快”。关键不是写得更多，而是让选择器更贴近浏览器渲染机制。

聚焦上下文，避免全局扫描

选项卡内容区通常有明确容器（如 .tab-panel.active），但很多实现仍写成 document.querySelector('.tab-content .price')。这迫使浏览器遍历整棵 DOM 树，哪怕目标元素只存在于当前激活面板内。

• ✅ 正确做法：先定位当前活动面板，再在其内部查找
• const activePanel = document.querySelector('.tab-panel.active');
• if (activePanel) activePanel.querySelector('.price').textContent = '¥299';
• ❌ 避免：重复对 document 执行多层嵌套选择，尤其在 tab 切换动画帧中

用 data 属性替代深度类名链

像 .tab-panel.active .product-list > .item:nth-child(2) .price span 这类选择器，不仅难维护，CSSOM 匹配开销大，且极易因 DOM 微调（如插入空格、换行、动态 class）而失效。

• ✅ 推荐：给关键交互节点加语义化 data- 属性
• <span data-price="current">¥199</span>
• activePanel.querySelector('[data-price="current"]')
• 浏览器对属性选择器的索引优化成熟，匹配速度比 4 层类名嵌套快 30%~60%

批量操作前预存引用，而非反复查询

选项卡切换常伴随多个元素状态更新（标题、价格、库存、按钮禁用态）。若每个都单独 querySelector，会造成多次回流+重排叠加。

• ✅ 一次性提取所需节点，缓存在切换前或面板初始化时
• const panelRefs = {
•   title: panel.querySelector('[data-role="title"]'),
•   price: panel.querySelector('[data-role="price"]'),
•   cta: panel.querySelector('[data-role="cta"]')
• };
• 后续切换只需 panelRefs.price.textContent = newPrice，零查询开销

警惕伪类与动态结构陷阱

:hover、:focus-within 等伪类无法被 querySelector 选中；而 v-if 或 ngIf 类动态移除的 DOM，在未激活状态下根本不存在，强行查询返回 null，易导致脚本中断。

• ✅ 切换前确认目标区域已挂载（例如监听 transitionend 或使用 MutationObserver）
• ✅ 对可能缺失的节点做防御性判断：el && el.classList.add('updated')
• ❌ 禁止写 document.querySelector('.tab-panel .item:hover .badge') —— 永远查不到