iframe的JS/CSS隔离边界极硬：JS全局对象和CSS作用域完全独立，但localStorage和cookies按源共享；同源时需显式添加allow-same-origin才能正常通信。
iframe 的 JS/CSS 隔离边界到底有多“硬”
iframe 提供的是浏览器原生的、最彻底的隔离——contentWindow 与主页面完全独立，JS 全局对象不共享，CSS 作用域天然隔离。这意味着：子应用里 var a = 1 不会影响主应用的 a，.btn { color: red } 也不会泄漏到父页面。但要注意：localStorage 和 cookies 仍按源（origin）共享，不是按 iframe 划分；若子应用和主站同源，它们读写的是同一份存储。
常见错误现象：开发者误以为“CSS 隔离=样式完全无干扰”，结果发现字体继承异常、rem 基准被父页面 html 标签的 font-size 影响。这是因为 iframe 内文档默认继承父页面的字体设置（如 font-family），但 rem 计算只依赖自身 html 的 font-size——只要子应用自己设了，就不会被父页面带偏。
真正容易踩的坑是：用 sandbox 属性时忘了加 allow-same-origin。一旦缺这个，即使同源 iframe 也会被降权为“跨域”，导致 postMessage 无法通信、fetch 报错 Failed to execute 'fetch' on 'Window': Illegal invocation。
为什么 iframe 加载慢且内存飙升
每个 iframe 对应一个独立的渲染进程（Chromium 中为 renderer 进程），意味着它有自己的 V8 实例、DOM 树、样式计算引擎。加载一个 React 子应用，不只是多跑一套 JS，而是多启动一个完整浏览器环境。实测数据：在中端设备上，5 个 iframe 同时运行，内存占用可比单页应用高 2–3 倍，首次渲染延迟平均增加 400–800ms。
立即学习“前端免费学习笔记（深入）”；
性能瓶颈主要来自三处：
-
src指向的 HTML 文件需完整下载、解析、执行，不能像 SPA 那样复用已加载的 runtime - 子应用内所有资源（JS/CSS/图片）都走独立网络请求，无法利用主应用的 HTTP/2 复用或缓存策略
- 销毁 iframe 时若未手动清理事件监听器或定时器，
contentWindow可能长期驻留内存，尤其在频繁切换微应用时
优化建议：对非首屏 iframe 使用 loading="lazy"；动态创建前先检查 document.visibilityState === 'visible'；销毁前执行 iframe.contentWindow?.close() 并置空 src（iframe.src = 'about:blank'）。
postMessage 是唯一通信路径，但常被用错
跨域 iframe 下，iframe.contentDocument 和 iframe.contentWindow.document 直接访问会抛出 DOMException: Blocked a frame from accessing a cross-origin frame，没有例外，也没有兼容 fallback。必须用 postMessage。
典型错误包括：
- 主应用在 iframe 尚未加载完成时就调用
iframe.contentWindow.postMessage(...)，此时contentWindow为null - 子应用接收消息后没校验
event.origin，比如只写if (event.data.type === 'INIT')，攻击者可在恶意页面伪造同名消息 - 用
'*'作为 targetOrigin 发送敏感数据（如 token），违反最小权限原则
正确做法：监听 iframe.onload 后再发初始化消息；子应用始终用 if (event.origin !== 'https://your-main-app.com') return; 校验；敏感操作要求双向确认（主发指令 → 子回 ACK → 主再发 payload）。
宽高塌陷、滚动穿透、移动端适配全是 CSS 问题
iframe 默认尺寸是 300×150px，但在 Flex/Grid 容器中极易被压缩为 0×0，表现为“白屏但控制台无报错”。这不是加载失败，是渲染不可见。
必须显式设置样式：
- 基础：
style="width: 100%; height: 400px; border: none;" - 响应式：用
aspect-ratio: 16 / 9+width: 100%控制比例，避免拉伸变形 - 禁用滚动条：在父容器加
overflow: hidden，scrolling="no"已废弃且无效 - 移动端：加
touch-action: auto防止 iframe 内滚动时父页面也跟着动；高度不足时用height: 100vh替代固定像素值
最容易被忽略的一点：iframe 内部页面若设置了 body { margin: 0 }，但没设 html, body { height: 100% }，会导致内容撑不满 iframe 高度，视觉上像“底部留白”，实际是子应用自身布局没撑开。
