微前端介绍

提到微前端，稍微懂微前端的同学，可能会这样问，为什么不用iframe方案呢？

其实，如果不考虑体验问题，iframe方案几乎是最完美的微前端解决方案；

iframe最大的特性就是提供了浏览器原生的硬隔离方案（样式隔离、js隔离），但它最大的问题也在于此，隔离性无法突破，应用间上下文无法被共享。

iframe存在哪些问题？这里简单说说。

• url不同步。
  • 浏览器刷新会重置（比如从列表页跳转到详情页、然后点击浏览器刷新按钮，会返回列表页，因为浏览器地址栏没有变化），导致iframe url状态丢失，浏览器的前进、后退按钮无法使用；
  • iframe和主页面共用一个浏览历史，iframe多次重定向，会导致浏览器的前进后退功能无法正常使用；
• UI不同步，DOM结构不共享。弹框及遮罩层问题：只能在iframe范围内垂直水平居中，没有办法在整个页面垂直水平居中；
• 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
• 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

不同源的系统之间的通讯需要通过 postMessage，存在一定的安全性；
事件处理也是个问题，比如实现顶层菜单展开时，需要点击空白处收起，如果点到iframe则无法触发