浅谈微前端沙箱机制

近期文章：

• 实现篇：手把手打造一个番茄时钟
• Vue3响应式原理那些事
• 实现篇：二叉树遍历收藏版
• Vue3开发常见性能问题知多少
• Vue3组件常见通信方式你了解多少？
• 实现篇：LRU算法的几种实现
• 从底层视角看requestAnimationFrame的性能增强
• Nginx Upstream了解一下
• 实现篇：一文搞懂Promise是如何实现的
• 一文搞懂 Markdown 文档规则

微前端的沙箱隔离机制是确保多个子应用在同一页面中独立运行的核心技术，主要通过JS隔离和CSS隔离两大维度实现。以下是深入分析：

1 JavaScript隔离机制

1.1 隔离方式

1.1.1 快照沙箱（SnapshotSandbox）

原理是在子应用挂载时保存全局window的快照（浅拷贝），卸载时通过对比恢复初始状态，中间修改记录在modifyPropsMap中。

• 仅支持单实例（同一时间仅运行一个子应用）。
• 性能较差（需遍历window属性）。
• 兼容低版本浏览器（如IE）的降级方案。

示例代码

class SnapshotSandbox {
   
  constructor() {
   
    this.windowSnapshot = {
   }; // 初始快照
    this.modifyPropsMap = {
   }; // 记录变更
  }
  activate() {
   
    for (const prop in window) {
   
      this.windowSnapshot[prop] = window[prop]; // 保存快照
    }
    Object.keys(this.modifyPropsMap).forEach(p => {
   
      window[p] = this.modifyPropsMap[p]; // 恢复子应用状态
    });
  }
  deactivate() {
   
    for (const prop in window) {
   
      if (window[prop] !== this.windowSnapshot[prop]) {
   
        this.modifyPropsMap[prop] = window[prop]; // 记录变更
        window[prop] = this.windowSnapshot[prop]; // 还原主应用状态