VSCode Web辅助窗口实现机制技术咨询

VSCode Web 的辅助窗口并非独立运行的页面，而是主窗口的“远程渲染容器”，核心逻辑完全依赖主窗口，这就是你看不到子窗口加载脚本的原因，具体实现方式如下：

• 极简子窗口骨架
  辅助窗口的 HTML 结构极度精简，通常只有一个空的根容器（比如 <div id="workbench"></div>），没有任何内联或外部脚本引用。它的唯一作用是提供一个独立的浏览器渲染上下文，所有的UI渲染、交互逻辑全由主窗口负责。

• 同源窗口的直接DOM操控
  主窗口通过 window.open() 创建辅助窗口后，会获取到子窗口的全局对象引用（因为同源，浏览器允许跨窗口DOM访问）。主窗口会将自身已加载的VSCode组件（比如编辑器面板、终端）直接挂载到子窗口的根容器中，相当于把主窗口的一部分UI“移”到了新窗口里。

• 基于postMessage的通信机制
  子窗口的用户操作（比如点击、输入）会通过 postMessage 发送到主窗口，主窗口处理完业务逻辑后，再更新子窗口的DOM状态。这种单向的逻辑委托，既保证了子窗口的轻量，又实现了多窗口之间的状态同步。

• 共享主窗口的资源与上下文
  辅助窗口不需要重复加载VSCode的庞大代码包（比如语言服务、编辑器内核），所有核心逻辑都在主窗口的进程中运行，子窗口仅作为渲染载体，大幅降低了内存和网络开销。

内容的提问来源于stack exchange，提问作者Jochen Kühner