必须按需加载、缓存复用iframe，避免重复创建；初始化只建一个容器，切换时仅改src；需预建固定数量iframe并隐藏复用，加isLoading防重复加载，删除前设src="about:blank"释放内存。
iframe 多标签页能做，但必须按需加载、缓存复用、避免重复创建，否则卡顿和内存泄漏是必然的。
如何让每个 tab 对应一个独立 iframe 且不重复创建
直接每次切换都 document.createElement('iframe') + appendChild() 是最常见错误——标签一多，DOM 膨胀、JS 上下文堆积、GC 压力大，页面很快变卡。
- 初始化时只创建一个空
<iframe>容器（比如id="tab-content-container"），所有 tab 内容都复用它 - 每个 tab 标签（
<li>）用data-src存真实 URL，点击时仅修改iframe.src，不新建元素 - 需要“同时显示多个 tab”？那就预建一组固定数量的 iframe（如 5 个），用
display: none隐藏未激活的，切换时只 show/hide + 切换src，不销毁重建 - 务必给每个 iframe 设置
sandbox="allow-scripts allow-same-origin"（同源时）或严格限制权限（跨域时），否则可能被浏览器拦截执行
点击 tab 后 iframe 不刷新或加载空白的排查点
现象：点第二个 tab，内容没变；或 iframe 显示 about:blank / 跨域错误；或控制台报 Blocked a frame with origin ... from accessing a cross-origin frame。
- 检查是否在切换前重复设置了相同
src—— 浏览器对相同 URL 可能直接走缓存甚至跳过加载，加个时间戳参数可强制刷新：iframe.src = url + '?t=' + Date.now() - 跨域 iframe 无法读写其 DOM，也不能监听
load事件获取状态，iframe.contentDocument会报错，此时只能靠postMessage通信 - 如果 iframe 页面自身有重定向（如登录跳转），父页面无法感知，建议在子页 JS 中主动
window.parent.postMessage({ type: 'ready' }, '*')通知加载完成 - 确保父页面和子页面的
document.domain一致（仅限同主域不同子域场景），否则same-origin策略仍会拦截
为什么首次切换特别慢？怎么预加载又不白耗资源
卡顿根源不是 iframe 本身，而是子页面完整 HTML + JS/CSS 的串行加载与执行阻塞了主线程。单纯设置 iframe.style.display = 'none' 并不能阻止它加载。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 真正有效的预加载：用一个隐藏的
<iframe style="display:none;position:absolute;width:1px;height:1px;">提前载入下一个 tab 的 URL，等用户真要点时，再把它的contentWindow.document或整个节点移到可视容器中 - 更轻量做法：只预请求 HTML（
fetch(url).then(r => r.text())），但注意这无法预执行 JS，且跨域受限；适合纯静态内容页 - 务必加
isLoading标志位，防止用户快速连点导致同一 URL 多次触发src赋值，引发重复加载 - 子页面内部也要配合优化：用
<link rel="preload">提前拉关键 CSS，<script defer>延迟非首屏 JS，<img loading="lazy">
删除 tab 时 iframe 内存没释放怎么办
调用 iframe.remove() 或 parentNode.removeChild(iframe) 后，若子页面含定时器、事件监听、全局变量，仍可能驻留内存。
- 删除前先清空 iframe 内容：
iframe.src = 'about:blank'，再移除节点——这能终止子页面 JS 执行上下文 - 如果使用了预建 iframe 池，删除 tab 时不要
remove()，改为iframe.src = 'about:blank'+iframe.style.display = 'none'，留作后续复用 - 子页面自己应监听
pagehide或visibilitychange，主动清理setInterval、addEventListener、WebSocket 连接等 - Chrome DevTools 的 Memory 面板里拍个堆快照，对比删 tab 前后，看是否有 detached iframe 节点残留——这是最直接的证据
真正难的不是让 tab 切换起来，而是让几十个 tab 长时间开着还不卡、不崩、不漏内存。重点永远在资源生命周期管理，而不是 DOM 操作本身。
