标签页数据应首次可视时加载，推荐用IntersectionObserver监听进入视口自动触发请求；需设唯一标识、避免重复observe；点击驱动需加防抖和loaded标记；隐藏面板用visibility: hidden保活iframe/video；插入HTML须过滤XSS；激活后需手动恢复焦点。
标签页切换时加载数据，不是靠“切换触发请求”，而是靠“面板首次显示时才发起请求”——否则会提前拉取所有标签的数据，浪费带宽、拖慢首屏、还可能因状态错乱导致渲染异常。
用 IntersectionObserver 检测面板是否进入可视区再加载
这是最轻量、最符合现代实践的做法：不监听点击，也不手动维护“是否已加载”状态，而是让浏览器自动通知你“这个面板现在真的要展示了”。适合内容区懒加载、图片延迟、API 数据按需拉取。
-
IntersectionObserver只在面板即将进入视口（或已进入）时回调，天然避开未激活 Tab 的请求 - 必须给每个
.tab-panel设置id或data-tab-panel，方便回调中识别目标 - 观察器初始化后，需调用
observer.observe(panelEl)，且只 observe 一次；重复 observe 同一元素会报错 - 首次加载时，如果面板默认是
display: block，需手动触发一次observer.observe()或用threshold: 0确保初始可见即触发
点击事件中加防抖 + 已加载标记判断
如果必须用点击驱动（比如要支持键盘 Enter 触发），就得自己记状态。直接在 click 回调里发请求，会导致重复点击重复请求——尤其是用户手快连点两次。
- 给每个面板加自定义属性，如
data-loaded="false"，成功加载后设为"true" - 点击时先查
panel.dataset.loaded === "true"，是则直接return，不发请求 - 用
fetch后接.then(() => { panel.dataset.loaded = "true" })，别忘了.catch中重置状态或打日志 - 避免用全局变量存加载状态（如
loadedTabs = new Set()），容易和多个 Tab 组件冲突
用 visibility: hidden 替代 display: none 保活 iframe/video/表单
如果某个 Tab 面板里嵌了 iframe（比如第三方仪表盘）、video 或需要保持输入焦点的 input，用 display: none 会让它们暂停甚至销毁。这时候不能等“切换时再加载”，而得让内容一直活着，只控制可见性。
- CSS 改用
.tab-panel { visibility: hidden; position: absolute; left: -9999px; }，激活时设visibility: visible; left: 0; - 这样 iframe 不会 reload，video 不会中断，input 的 value 和 focus 也不会丢
- 但必须同步更新
aria-hidden="true/false"，否则屏幕阅读器仍会读隐藏内容 - JS 切换逻辑里，除了改样式，还得设
panel.setAttribute('aria-hidden', 'true')
服务端返回 HTML 片段时，注意 XSS 和脚本执行风险
如果后端返回的是带 <script></script> 的 HTML 字符串（比如统计代码、互动组件），直接 innerHTML = responseText 会执行脚本——但这些脚本在非激活 Tab 里执行，可能访问不到 DOM、报错，或污染全局作用域。
- 优先让后端返回纯 JSON，前端用模板拼出安全 HTML（如
textContent+createElement） - 若必须插 HTML，用
DOMPurify.sanitize(html)过滤后再插入 - 绝对不要在
innerHTML插入含<script src="..."></script>的片段，这种外链脚本会在插入瞬间下载执行，不受 Tab 激活控制 - 动态插入的
<script></script>标签，需手动创建并 append 到已挂载的 panel 节点下，且仅在面板激活后执行
最常被忽略的是：没有处理面板从隐藏态变为可见态时的焦点恢复。比如用户切到“设置”Tab，里面第一个 input 应自动获得焦点——但这不是靠 CSS 或 HTML 属性能解决的，得在 JS 切换完成、面板 offsetParent !== null 且 aria-hidden="false" 后，手动 input.focus()。否则键盘用户得按多次 Tab 才能进输入框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
