用 opacity + visibility 替代 display 可解决标签页闪烁：设 opacity: 0、visibility: hidden、pointer-events: none 并配 transition，避免 layout thrashing 和状态丢失。
直接用 display: none 切换标签页，90% 的闪烁问题就出在这儿——它强制重排、销毁 DOM、丢状态，浏览器根本来不及“平滑过渡”。
为什么 display 切换一定会闪
不是 CSS 写得不够好，而是 display 本身不支持过渡动画，且触发 layout thrashing：
-
display: none会让元素彻底脱离文档流，父容器高度瞬间坍塌，再切回来又要重新计算所有子元素布局 - 内部的
iframe、video、表单输入框会暂停或清空（比如用户刚打一半字，切走再切回就没了） - 即使加了
transition: all 0.3s，对display也完全无效，浏览器直接跳变 - Vue 的
v-if、React 的条件渲染默认就是走display路线，不显式干预就会复现这个问题
用 opacity + visibility 替代 display
这是最轻量、兼容性最好、且能真正启用硬件加速的方案：
- 隐藏时设
opacity: 0; visibility: hidden; pointer-events: none; - 显示时设
opacity: 1; visibility: visible; pointer-events: auto; - CSS 中必须写
transition: opacity 0.25s ease, visibility 0.25s;——注意：visibility的过渡时间不能为 0，否则动画断层 - 给容器加
will-change: opacity;或transform: translateZ(0);，让浏览器提前启用 GPU 合成 - 别忘了同步更新
aria-hidden="true"/"false"，否则读屏器会把隐藏内容也读出来
富内容标签页要预加载，别等点击才 fetch
所谓“切换卡一下”，大概率是 JS 在点击后才发请求、等接口、拼 HTML，用户看到的就是白屏或 loading 占位符闪进——这不是动画慢，是逻辑堵在 I/O 上：
立即学习“前端免费学习笔记（深入）”；
- 首次进入页面时，并发拉取所有 tab 的数据：
Promise.all([fetch('/tab1'), fetch('/tab2')]) - 数据拿到后先存到内存（如
Map或组件级ref/useState），切换只做视图映射，不重复请求 - 如果某 tab 内容太大（比如含大量图表或富文本），用
IntersectionObserver延迟初始化非可视区组件，但首屏 tab 必须同步 ready - 避免用
innerHTML = response.data直接插入整段 HTML；改用document.createElement()+element.append()分步挂载，减少 HTML 解析阻塞
框架里别让组件反复销毁重建
像 <el-tabs destroy-on-hide="true"> 或 Ant Design 的 forceRender={false} 是性能杀手：
- 检查是否启用了类似
lazy（Vue）或destroyInactiveTabPane（AntD）的 props，设为false可保留已挂载实例 - 组件卸载前必须清理副作用：清除
setInterval、addEventListener、取消未完成的axios请求 - 多个 tab 共享同一份 state（如一个大对象
formData）会导致数据污染；应按 tab key 初始化独立状态：useState(() => initByTab(tabKey)) - 别在 tab 内写长循环（如
for (let i = 0; i ），拆成 <code>requestIdleCallback或 Web Worker 处理
真正难的不是加个 fade 动画，而是得同时管住三件事：DOM 不重排、资源不重载、状态不丢失。漏掉任意一环，用户眼里的“一闪”，就是这三者中某一个在后台崩了一次。
