用classlist.toggle和aria-hidden控制显隐可避免重复渲染；硬改innerhtml或循环设textcontent易引发重绘；改style.display会触发重排且中断iframe/video/表单状态。
直接用 classList.toggle 切换 class，配合 aria-hidden 控制显隐，不碰 style.display，就能避开绝大多数重复渲染问题。硬改 innerHTML 或在循环里反复设 textContent 是重绘高发区。
为什么改 style.display 会触发多余重排
每次写 panel.style.display = 'block'，浏览器都要重新计算该元素及其父容器的布局流——哪怕只是从 none 切到 block，也会强制触发 reflow。更麻烦的是，display: none 会让内部 iframe 暂停、video 中断、表单输入丢失，后续恢复状态成本极高。
- 正确做法：用 CSS 类统一控制，比如
.tab-pane[aria-hidden="true"] { display: none; } - JS 只负责
panel.setAttribute('aria-hidden', 'true')和button.setAttribute('aria-selected', 'false') - 若需保留占位（比如防止布局跳动），改用
visibility: hidden+position: absolute
data-tab 映射比 id 更安全，但匹配失败就等于白忙
用 data-tab="products" 关联按钮和面板，能避免多个标签页组件复用时的 ID 冲突。但一旦属性值大小写不一致、尾部带空格或引号不闭合，querySelectorAll('[data-tab-panel="' + target + '"]') 就查不到节点，导致切换无声无息失败。
- 检查点：
data-tab="products"和data-tab-panel="products"必须完全一致（包括空格、大小写） - 别混用：
id="products-panel"和data-tab-panel="products"同时存在，容易让 JS 逻辑分支混乱 - 动态加载内容时，
data-tab-panel比依赖 DOM 顺序的:nth-child()更可靠
切换动画期间连点，DOM 状态容易错乱
用户快速连点两个 tab 按钮，可能上一帧的 transition 还没结束，下一帧的 class 已被覆盖，结果出现两个面板同时显示，或都隐藏。
- 简单防抖：加个
isTransitioning布尔锁，切换开始设为true，监听transitionend后再置false - 更稳妥：切换前先查
getComputedStyle(panel).opacity === '0'，只对已完全隐藏的面板执行 show - 原子操作：用
el.classList.toggle('active', true)替代el.classList.remove('active'); el.classList.add('active')
最常被忽略的一点是：脚本如果放在 里直接执行，querySelectorAll 会返回空列表——DOM 根本还没解析完。异步插入的 tab 按钮（比如 fetch 后渲染），静态遍历也根本找不到。这些不是“渲染问题”，而是 DOM 就没到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
