Henry's Log.

搜尋文章

前端面试 P081：StrictMode 的检查与版本边界JavaScript 函数传参：值传递与对象引用前端面试 P018：手写柯里化与参数个数边界前端面试 P010：普通函数、箭头函数与 this前端面试 P088：Immer 草稿与结构共享前端面试 P006：对象遍历与属性键的选择前端面试 P009：执行上下文、调用栈与词法作用域前端面试 P094：SSE 分片解码与事件边界前端面试 P097：请求并发池、任务启动与失败释放前端面试 P076：Fiber 的协作调度与不可中断边界前端面试 P013：节流、防抖与取消待执行任务前端面试 P033：Object.create、描述符与共享属性前端面试 P057：Vue Router 配置、历史模式与导航前端面试 P030：构造函数与 new 的返回规则前端面试 P077：key、组件身份与状态重置前端面试 P039：同源策略、CORS 与请求是否发出前端面试 P032：instanceof、原型链与自定义判断前端面试 P047：Proxy 与 Vue 2 属性拦截的区别前端面试 P019：函数组合与同步数据管道前端面试 P004：手写深拷贝、循环引用与实现边界前端面试 P059：导航守卫、顺序与权限边界前端面试 P083：函数式更新、队列与纯度前端面试 P014：call、apply、bind 与模拟实现边界前端面试 P012：高阶函数、柯里化与部分应用前端面试 P041：事件委托、目标匹配与 React 事件前端面试 P048：track、trigger、动态依赖与清理前端面试 P066：自定义指令与 DOM 资源清理前端面试 P075：props 只读、状态归属与派生数据前端面试 P062：Pinia 创建、实例范围与使用前端面试 P073：JSX 编译、React 元素与表达式前端面试 P026：Promise 延迟与顺序任务队列前端面试 P016：纯函数、副作用与参数共享前端面试 P094：流式文本的 SSE 与 WebSocket 取舍前端面试 P064：storeToRefs 与 action 解构纠错前端面试 P044：Composition API 与组合式函数前端面试 P051：副作用清理与过期请求前端面试 P021：事件循环、微任务与渲染机会前端面试 P003：原始值、对象共享与赋值行为前端面试 P098：用户偏好存储、TTL 与命名空间前端面试 P056：插槽作用域与 slot props前端面试 P011：闭包、变量绑定与循环回调前端面试 P027：async 错误处理与 return await前端面试 P036：CSP、nonce 与防护边界前端面试 P007：隐式转换、ToPrimitive 与空数组比较前端面试 P035：继承方式对照与寄生组合式继承前端面试 P025：手写 Promise 的最小状态机前端面试 P079：受控表单与非受控输入前端面试 P072：虚拟 DOM 的价值与性能边界前端面试 P005：数组方法、可变性与回调副作用前端面试 P100：Proxy 沙箱为何不是安全边界前端面试 P040：发布订阅、事件总线与退订前端面试 P053：props、组件事件与 v-model 约定前端面试 P008：相等比较、NaN 与 Object.is前端面试 P065：Pinia 最小变更与对象替换的取舍前端面试 P087：Redux 单向数据流与状态边界前端面试 P002：数据类型与 typeof 的陷阱前端面试 P085：useReducer 与 useState 的实际取舍前端面试 P078：React 合成事件与旧事件池纠错前端面试 P025：Promise 解析过程与实现验收前端面试 P043：Vue 渐进式与声明式 UI前端面试 P091：SWR、TanStack Query 与服务端缓存前端面试 P074：函数组件快照与类实例的输出纠错前端面试 P071：UI 是状态映射与渲染纯度前端面试 P054：provide、inject 与跨层级依赖前端面试 P061：何时引入全局状态管理前端面试 P097：请求去重、缓存键与过期策略前端面试 P086：Context 拆分与订阅更新边界前端面试 P024：Promise 并发组合与空输入边界前端面试 P089：Redux middleware、next 与异步返回值前端面试 P022：Promise 状态、链式调用与错误传播前端面试 P084：状态提升、单一来源与范围选择前端面试 P034：class、super 与语法糖的边界前端面试 P058：路由参数、query 与组件 props前端面试 P020：定时器延迟、轮询重叠与清理前端面试 P029：对象原型、prototype 与属性查找前端面试 P095：AI SDK、编排框架与生成 UI 工具前端面试 P092：Signals、细粒度依赖与 React 集成边界前端面试 P046：Vue 响应式陷阱与 ref 自动解包纠错前端面试 P090：Zustand、Jotai 与状态作用域前端面试 P100：微前端 JS 隔离方案与资源生命周期前端面试课程：学习目录与纠错记录前端面试 P023：async、await、异步恢复与并发前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别前端面试 P015：IIFE、作用域隔离与现代模块前端面试 P063：Pinia 状态、getter 与 action前端面试 P052：Vue 条件、列表与表单指令前端面试 P050：Vue 生命周期、DOM 时机与 SSR前端面试 P060：路由 meta、合并与界面配置前端面试 P045：ref、reactive、computed 与 watch前端面试 P096：令牌无感刷新、重试与安全边界前端面试 P093：MCP 架构与前端集成场景前端面试 P080：组合、children 与自定义 Hook前端面试 P082：useState 更新请求、快照与批处理前端面试 P067：Vue 模板编译与运行时边界前端面试 P031：手写 new 与 Reflect.construct 的区别前端面试 P069：nextTick 等待 DOM 刷新与绘制的区别前端面试 P055：默认插槽、具名插槽与内容接口前端面试 P038：嵌套定时器的最小延迟与调度选择前端面试 P099：倒计时截止时间、漂移与完成事件前端面试 P019：记忆化缓存与递归调用的纠错前端面试 P049：Vue 与 React 的更新范围和批处理前端面试 P004：浅拷贝、深拷贝与 structuredClone前端面试 P042：Vue 面试导学与学习顺序前端面试 P096：共享刷新 Promise 与并发失败恢复前端面试 P070：React 面试导学与复习主线前端面试 P028：异步输出顺序的逐步推演前端面试 P001：var、let、const 与暂时性死区前端面试 P037：内存泄漏的快照与引用链排查前端面试 P017：手写 bind、重复绑定与构造调用你好，這裡是 Henry 的自留地給想法找一個落腳的地方，也給那些解決過的問題留下一點記錄。
Esc 關閉
全部文章

前端面试 P100：微前端 JS 隔离方案与资源生命周期

前端2 分鐘

目前顯示中文（中國）原文

来源：方格前端讲面试 · 微前端架构中，一般是如何到JavaScript隔离的？，12 分 46 秒。

回看定位：00:28 隔离目标 · 01:49 Proxy

先说隔离目标

避免多个应用写同名全局变量、重复监听、共享原型污染或卸载后遗留任务。JS、CSS、DOM、路由、网络与存储是不同维度，不是隔离 window 一项就全部解决。

Proxy 沙箱

用应用独立的 fakeWindow 接住部分全局写入，读取时按规则回退真实环境；配合代码执行环境、全局名称映射与 API 适配，支持某些并存场景。

单独创建 Proxy 不会自动把任意已有脚本里的 window、globalThis 或裸标识符全改为代理。DOM API、函数 this、访问器、属性描述符和原型等也有兼容要求。

快照沙箱

激活前记录全局状态，停用时比较差异并恢复，保存应用自己的修改供再次激活。课程展示了这种基本模式，但浅快照容易漏掉删除、不可枚举与 Symbol 属性、嵌套对象修改和异步期间产生的变化。

同一个真实全局对象上的快照回滚，难以保证多个应用同时写同一状态互不干扰，常更适合受控单应用切换模型。

更强边界与成本

iframe 提供独立文档与 realm，可结合不同源和正确 sandbox 策略建立更强隔离，但有通信、样式和集成成本；同源 iframe 也不能默认当作安全隔离。Worker 有独立 JS 执行环境，却没有同样的直接 DOM 能力。

Shadow DOM 主要隔离 DOM/CSS 边界，不自动创建独立 JavaScript 全局。模块作用域减少顶层名称冲突，也不自动隔离全局 API 副作用。

无论方案，都要规定 mount/unmount、订阅、timer、请求、样式和路由的清理。具体 Proxy 示例及安全限制见 前端面试 P100：Proxy 沙箱为何不是安全边界。

#前端面试#前端工程#微前端#JS隔离#沙箱
看看其他文章 →