在掘金也看了非常多的文章，也想记录一下自己的学习记录，当然并不一定准确，但是希望各位大佬多多指教。
吕布镇贴！！！前两天刚打过哈哈！
在公司微前端的方案采用了micro-app的方案，当然这个主要是因为自己的公司才用的估计，目前来说wujie算是一个各方面都处理的比较好的框架，这几天在看这个微前端的文章，感觉没有说的那么明白的文章，当然我理解的可能也有问题，不过还是分享一起讨论一下。
1.渲染方式上：
-spa的渲染方式，采用了监听URL的变化来进行加载不同的子应用，这样的方法会感觉太原始以及繁琐了，所以在渲染方式，micro-app以及wujie都采用了webComponent的方式进行渲染。（这中间其实也有一点问题，因为没有看源码，micro-app官网说是类似web Component）
有可能有些人不太了解这个API，这个API是新出的，有些浏览器目前不支持。
简单介绍一下web Component是什么？
我们都知道Vue，React都有组件，可以在项目中去实现组件化的思想。而Web Component就是浏览器组件化的一个方案，是浏览器支持的组件，可以通用于各种框架，某种意义算是原生的，而像input等浏览器的控件都算是一个WebComponent。
而这个API有比较重要的方法，第一个就是customElement，这个是自己可以创建一个组件，可以对做属性监听，还有样式改变各种东西，做一个浏览器原生组件，而wujie和micro-app就是通过这种方式创建了一个子应用，来加载子应用。这样去优化渲染方式更加优雅以及方便。第二个是shadow DOM，这个节点在外层的DOM是没办法看得到这个DOM，可以将DOM树挂载到这个节点上，这样外面的dom节点没办法看到里面的，然后里面也没办法看到外面的dom节点，形成一个天生的隔离。
2.CSS样式隔离
qiankun框架是采用自己的两个沙箱，第一个沙箱是利用我们刚刚说的WebComponent的第二个方法，将子应用挂载到ShadowDom节点下面，这样就形成了天然的CSS隔离，但是这样的隔离存在一定的问题，就是第三方组件的弹窗是默认挂载到主应用的DOM节点，这样Shadow Dom里面的样式没办法作用到主应用，所以弹窗样式就消失了。目前的解决方法是在第三方组件中手动设置挂载节点，挂载到Shadow Dom上。第二个沙箱就是采用了像vue，react的方式的CSS Moudles，通过作用域（scpoed）等来实现隔离。
micro-app框架是采用了子应用的CSS名字前面加上子应用app的名字来区分css的样式，防止不同的子应用出现冲突，但是还是存在冲突的可能，如果主应用有一摸一样的css名字，那主子应用就会出现css样式冲突，并不能彻底解决，特别是比较复杂的大型项目中。micro-app框架还提供shadow dom的隔离方法来使用，不过依然存在弹窗样式问题。
wujie框架css样式隔离采用了shadow dom的方式来进行隔离，但是解决了弹窗样式问题，这个方法得益于wujie框架的js隔离采用了iframe的方式，在进行挂载的时候，对iframe进行操作的时候，iframe通过proxy的方法将dom劫持到shadow dom上，这样挂载的节点操作的时候就直接被拦截挂载到shadow dom上，完美解决。
3.JS隔离
qiankun框架以及micro-app框架采用同样的JS隔离方法，当然micro-app在加载的时候做了一些优化，要快一些，但是方案基本是不变的。
一共存在三种沙箱，前两种是单例模式，后一种不是。
第一种legacySandBox
legacySandBox核心就是在子应用加载的时候去还原之前子应用的状态，当卸载的时候还原主应用的状态。当加载子应用的时候，将修改的状态应用到子应用上，卸载的时候记录子应用的状态修改，还原主应用。对比的方法是监听修改的属性并记录，进行记录修改的状态。
第二种snapshotSandBox
snapshotSandBox核心是在子应用激活 / 卸载时分别去通过快照的形式记录/还原状态来实现沙箱的。当第三种不被支持的时候，会降级到第二种方式。这种方式跟第二种的区别在于是将子应用的状态与主应用的状态做diff去记录修改的状态。
第三种 proxySandBox
第三种常应用于多实例的场景。这种沙箱的核心在于在每个子应用的内部，会创造一个fake window对象，这样如果不是window原有的属性，都将记录子fake window上，如果是原有属性，就会改变原有属性，这种方式是通过Proxy以及defineProperty的方式实现。
除此之外，wujie微前端还采用了js预加载，而其他两种框架只能预加载静态资源，css等，而其采用的方式是新的一个api，requestIdeCallbacks，这个API会将运行放在每一帧的空余时间内运行，不影响阻塞dom操作以及各种交互，充分利用了资源，使得首页加载速度加快很多。
这是自己了解的关于微前端相关的内容，希望可以一起交流交流。
