一些「炒冷飯」背景介紹

本文并不會從頭開始介紹 Web Worker 的基礎(chǔ)知識和基本 API 的使用等（只是部分有涉及），若還未了解過 Web Worker，可參考查閱 W3C 標準 Workers 文檔 中的相關(guān)紹。

自從 2014 年 HTML5 正式推薦標準發(fā)布以來，HTML5 增加了越來越多強大的特性和功能，而在這其中，工作線程（Web Worker）概念的推出讓人眼前一亮，但未曾隨之激起多大的浪花，并被在其隨后工程側(cè)的 Angular、Vue、React 等框架的「革命」浪潮所淹沒。當然，我們總會偶然看過一些文章介紹，或出于學習的目的做過一些應用場景下的練習，甚或在實際項目中的涉及大量數(shù)據(jù)計算場景中真的使用過。但相信也有很多人和我一樣茫然，找不到這種高大上的技術(shù)在實際項目場景中能有哪些能起到廣泛作用的應用。

究其原因，Web Worker 獨立于 UI 主線程運行的特性使其被大量考慮進行性能優(yōu)化方面的嘗試（比如一些圖像分析、3D 計算繪制等場景），以保證在進行大量計算的同時，頁面對用戶能有及時的響應。而這些性能優(yōu)化的需求在前端側(cè)一方面涉及頻率低，另一方面也能通過微任務或服務端側(cè)處理來解決，它并不能像 Web Socket 這種技術(shù)為前端頁面下的輪詢場景的優(yōu)化能帶來質(zhì)的改變。

直至 2019 年爆火的微前端架構(gòu)的出現(xiàn)，基于微應用間 JavaScript 沙箱隔離的需求，Web Worker 才得以重新從邊緣化的位置躍入到我的中心視野。根據(jù)我已經(jīng)了解到的 Web Worker 的相關(guān)知識，我知道了 Web Worker 是工作在一個獨立子線程下（雖然這個子線程比起 Java 等編譯型語言的子線程實現(xiàn)得還有點弱，如無法加鎖等），線程之間自帶隔離的特性，那基于這種「物理」性的隔離，能不能實現(xiàn) JavaScript 運行時的隔離呢？

本文接下來的內(nèi)容，將介紹我在探索基于 Web Worker 實現(xiàn) JavaScript 沙箱隔離方案過程中的一些資料收集、理解以及我的踩坑和思考的過程。雖然可能整篇文章內(nèi)容都在「炒冷飯」，但還是希望我的探索方案的過程能對正在看這篇文章的你有所幫助。

JavaScript 沙箱

在探索基于 Web Worker 的解決方案之前，我們先要對當前要解決的問題——JavaScript 沙箱有所了解。

提到沙箱，我會先想到出于興趣玩過的沙盒游戲，但我們要探索的 JavaScript 沙箱不同于沙盒游戲，沙盒游戲注重對世界基本元素的抽象、組合以及物理力系統(tǒng)的實現(xiàn)等，而 JavaScript 沙箱則更注重在使用共享數(shù)據(jù)時對操作狀態(tài)的隔離。

在現(xiàn)實與 JavaScript 相關(guān)的場景中，我們知道平時使用的瀏覽器就是一個沙箱，運行在瀏覽器中的 JavaScript 代碼無法直接訪問文件系統(tǒng)、顯示器或其他任何硬件。Chrome 瀏覽器中每個標簽頁也是一個沙箱，各個標簽頁內(nèi)的數(shù)據(jù)無法直接相互影響，接口都在獨立的上下文中運行。而在同一個瀏覽器標簽頁下運行 HTML 頁面，有哪些更細節(jié)的、對沙箱現(xiàn)象有需求的場景呢？

當我們作為前端開發(fā)人員較長一段時間后，我們很輕易地就能想到在同一個頁面下，使用沙箱需求的諸多應用場景，譬如：

1. 執(zhí)行從不受信的源獲取到的第三方 JavaScript 代碼時（比如引入插件、處理 jsonp 請求回來的數(shù)據(jù)等）。

2. 在線代碼編輯器場景（比如著名的 codesandbox）。

3. 使用服務端渲染方案。

4. 模板字符串中的表達式的計算。

5. ... ...

這里我們先回到開頭，先將前提假設(shè)在我正在面對的微前端架構(gòu)設(shè)計下。在微前端架構(gòu)（推薦文章 Thinking in Microfrontend 、擁抱云時代的前端開發(fā)架構(gòu)——微前端 等）中，其最關(guān)鍵的一個設(shè)計便是各個子應用間的調(diào)度實現(xiàn)以及其運行態(tài)的維護，而運行時各子應用使用全局事件監(jiān)聽、使全局 CSS 樣式生效等常見的需求在多個子應用切換時便會成為一種污染性的副作用，為了解決這些副作用，后來出現(xiàn)的很多微前端架構(gòu)（如 乾坤）有著各種各樣的實現(xiàn)。譬如 CSS 隔離中常見的命名空間前綴、Shadow DOM、 乾坤 sandbox css 的運行時動態(tài)增刪等，都有著確實行之有效的具體實踐，而這里最麻煩棘手的，還是微應用間的 JavaScript 的沙箱隔離。

在微前端架構(gòu)中，JavaScript 沙箱隔離需要解決如下幾個問題：

1. 掛在 window 上的全局方法/變量（如 setTimeout、滾動等全局事件監(jiān)聽等）在子應用切換時的清理和還原。

2. Cookie、LocalStorage 等的讀寫安全策略限制。

3. 各子應用獨立路由的實現(xiàn)。

4. 多個微應用共存時相互獨立的實現(xiàn)。

在 乾坤 架構(gòu)設(shè)計中，關(guān)于沙箱有兩個入口文件需要關(guān)注，一個是 proxySandbox.ts，另一個是 snapshotSandbox.ts，他們分別基于 Proxy 實現(xiàn)代理了 window 上常用的常量和方法以及不支持 Proxy 時降級通過快照實現(xiàn)備份還原。結(jié)合其相關(guān)開源文章分享，簡單總結(jié)下其實現(xiàn)思路：起初版本使用了快照沙箱的概念，模擬 ES6 的 Proxy API，通過代理劫持 window ，當子應用修改或使用 window 上的屬性或方法時，把對應的操作記錄下來，每次子應用掛載/卸載時生成快照，當再次從外部切換到當前子應用時，再從記錄的快照中恢復，而后來為了兼容多個子應用共存的情況，又基于 Proxy 實現(xiàn)了代理所有全局性的常量和方法接口，為每個子應用構(gòu)造了獨立的運行環(huán)境。

另外一種值得借鑒的思路是阿里云開發(fā)平臺的 Browser VM，其核心入口邏輯在 Context.js 文件中。它的具體實現(xiàn)思路是這樣的：

1. 借鑒 with 的實現(xiàn)效果，在 webpack 編譯打包階段為每個子應用代碼包裹一層代碼（見其插件包 breezr-plugin-os 下相關(guān)文件），創(chuàng)建一個閉包，傳入自己模擬的 window、document、location、history 等全局對象（見 根目錄下 相關(guān)文件）。

2. 在模擬的 Context 中，new 一個 iframe 對象，提供一個和宿主應用空的（about:blank) 同域 URL 來作為這個 iframe 初始加載的 URL（空的 URL 不會發(fā)生資源加載，但是會產(chǎn)生和這個 iframe 中關(guān)聯(lián)的 history 不能被操作的問題，這時路由的變換只支持 hash 模式），然后將其下的原生瀏覽器對象通過 contentWindow 取出來（因為 iframe 對象天然隔離，這里省去了自己 Mock 實現(xiàn)所有 API 的成本）。

3. 取出對應的 iframe 中原生的對象之后，繼續(xù)對特定需要隔離的對象生成對應的 Proxy，然后對一些屬性獲取和屬性設(shè)置，做一些特定的實現(xiàn)（比如 window.document 需要返回特定的沙箱 document 而不是當前瀏覽器的document 等）。

4. 為了文檔內(nèi)容能夠被加載在同一個 DOM 樹上，對于 document，大部分的 DOM 操作的屬性和方法仍舊直接使用宿主瀏覽器中的 document 的屬性和方法處理等。

總的來說，在 Browser VM 的實現(xiàn)中， 可以看出其實現(xiàn)部分還是借鑒了 乾坤 或者說其他微前端架構(gòu)的思路，比如常見全局對象的代理和攔截。并且借助 Proxy 特性，針對 Cookie、LocalStorage 的讀寫同樣能做一些安全策略的實現(xiàn)等。但其最大的亮點還是借助 iframe 做了一些取巧的實現(xiàn)，當這個為每個子應用創(chuàng)建的 iframe 被移除時，寫在其下 window 上的變量和 setTimeout、全局事件監(jiān)聽等也會一并被移除；另外基于 Proxy，DOM 事件在沙箱中做記錄，然后在宿主中生命周期中實現(xiàn)移除，能夠以較小的開發(fā)成本實現(xiàn)整個 JavaScript 沙箱隔離的機制。

除了以上社區(qū)中現(xiàn)在比較火的方案，最近我也在 大型 Web 應用插件化架構(gòu)探索 一文中了解到了 UI 設(shè)計領(lǐng)域的 Figma 產(chǎn)品也基于其插件系統(tǒng)產(chǎn)出了一種隔離方案。起初 Figma 同樣是將插件代碼放入 iframe 中執(zhí)行并通過 postMessage 與主線程通信，但由于易用性以及 postMessage 序列化帶來的性能等問題，F(xiàn)igma 選擇還是將插件放入主線程去執(zhí)行。Figma 采用的方案是基于目前還在草案階段 Realm API，并將 JavaScript 解釋器的一種 C++ 實現(xiàn) Duktape 編譯到了 WebAssembly，然后將其嵌入到 Realm 上下文中，實現(xiàn)了其產(chǎn)品下的三方插件的獨立運行。這種方案和探索的基于 Web Worker 的實現(xiàn)可能能夠結(jié)合得更好，持續(xù)關(guān)注中。

Web Worker 與 DOM 渲染

在了解了 JavaScript 沙箱的「前世今生」之后，我們將目光投回本文的主角——Web Worker 身上。

正如本文開頭所說，Web Worker 子線程的形式也是一種天然的沙箱隔離，理想的方式，是借鑒 Browser VM 的前段思路，在編譯階段通過 Webpack 插件為每個子應用包裹一層創(chuàng)建 Worker 對象的代碼，讓子應用運行在其對應的單個 Worker 實例中，比如：

__WRAP_WORKER__(`/* 打包代碼 */ }`);

function __WRAP_WORKER__(appCode) {
 var blob = new Blob([appCode]);
 var appWorker = new Worker(window.URL.createObjectURL(blob));
} 

但在了解過微前端下 JavaScript 沙箱的實現(xiàn)過程后，我們不難發(fā)現(xiàn)幾個在 Web Worker 下去實現(xiàn)微前端場景的 JavaScript 沙箱必然會遇到的幾個難題：

1. 出于線程安全設(shè)計考慮，Web Worker 不支持 DOM 操作，必須通過 postMessage 通知 UI 主線程來實現(xiàn)。

2. Web Worker 無法訪問 window、document 之類的瀏覽器全局對象。

其他諸如 Web Worker 無法訪問頁面全局變量和函數(shù)、無法調(diào)用 alert、confirm 等 BOM API 等問題，相對于無法訪問 window、document 全局對象已經(jīng)是小問題了。不過可喜的是，Web Worker 中可以正常使用 setTimeout、setInterval 等定時器函數(shù)，也仍能發(fā)送 ajax 請求。

所以，當先要解決問題，便是在單個 Web Worker 實例中執(zhí)行 DOM 操作的問題了。首先我們有一個大前提：Web Worker 中無法渲染 DOM，所以，我們需要基于實際的應用場景，將 DOM 操作進行拆分。

React Worker DOM

因為我們微前端架構(gòu)中的子應用局限在 React 技術(shù)棧下，我先將目光放在了基于 React 框架的解決方案上。

在 React 中，我們知道其將渲染階段分為對 DOM 樹的改變進行 Diff 和實際渲染改變頁面 DOM 兩個階段這一基本事實，那能不能將 Diff 過程置于 Web Worker 中，再將渲染階段通過 postMessage 與主線程進行通信后放在主線程進行呢？簡單一搜，頗為汗顏，已經(jīng)有大佬在 5、6 年前就有嘗試了。這里我們可以參考下 react-worker-dom 的開源代碼。

react-worker-dom 中的實現(xiàn)思路很清晰。其在 common/channel.js 中統(tǒng)一封裝了子線程和主線程互相通信的接口和序列化通信數(shù)據(jù)的接口，然后我們可以看到其在 Worker 下實現(xiàn) DOM 邏輯處理的總?cè)肟谖募?worker 目錄下，從該入口文件順藤摸瓜，可以看到其實現(xiàn)了計算 DOM 后通過 postMessage 通知主線程進行渲染的入口文件 WorkerBridge.js 以及其他基于 React 庫實現(xiàn)的 DOM 構(gòu)造、Diff 操作、生命周期 Mock 接口等相關(guān)代碼，而接受渲染事件通信的入口文件在 page 目錄下，該入口文件接受 node 操作事件后再結(jié)合 WorkerDomNodeImpl.js 中的接口代碼實現(xiàn)了 DOM 在主線程的實際渲染更新。

簡單做下總結(jié)?；?React 技術(shù)棧，通過在 Web Worker 下實現(xiàn) Diff 與渲染階段的進行分離，可以做到一定程度的 DOM 沙箱，但這不是我們想要的微前端架構(gòu)下的 JavaScript 沙箱。先不談拆分 Diff 階段與渲染階段的成本與收益比，首先，基于技術(shù)?？蚣艿奶厥庑运龅倪@諸多努力，會隨著這個框架本身版本的升級存在著維護升級難以掌控的問題；其次，假如各個子應用使用的技術(shù)棧框架不同，要為這些不同的框架分別封裝適配的接口，擴展性和普適性弱；最后，最為重要的一點，這種方法暫時還是沒有解決 window 下資源共享的問題，或者說，只是啟動了解決這個問題的第一步。

接下來，我們先繼續(xù)探討 Worker 下實現(xiàn) DOM 操作的另外一種方案。window 下資源共享的問題我們放在其后再作討論。

AMP WorkerDOM

在我開始糾結(jié)于如 react-worker-dom 這種思路實際落地開發(fā)的諸多「天塹」問題的同時，瀏覽過其他 DOM 框架因為同樣具備插件機制偶然迸進了我的腦海，它是 Google 的 AMP。

AMP 開源項目 中除了如 amphtml 這種通用的 Web 組件框架，還有很多其他工程采用了 Shadow DOM、Web Component 等新技術(shù)，在項目下簡單刷了一眼后，我欣喜地看到了工程 worker-dom。

粗略翻看下 worker-dom 源碼，我們在 src 根目錄下可以看到 main-thread 和 worker-thread 兩個目錄，分別打開看了下后，可以發(fā)現(xiàn)其實現(xiàn)拆分 DOM 相關(guān)邏輯和 DOM 渲染的思路和上面的 react-worker-dom 基本類似，但 worker-dom 因為和上層框架無關(guān)，其下的實現(xiàn)更為貼近 DOM 底層。

先看 worker-thread DOM 邏輯層的相關(guān)代碼，可以看到其下的 dom 目錄 下實現(xiàn)了基于 DOM 標準的所有相關(guān)的節(jié)點元素、屬性接口、document 對象等代碼，上一層目錄中也實現(xiàn)了 Canvas、CSS、事件、Storage 等全局屬性和方法。

接著看 main-thread，其關(guān)鍵功能一方面是提供加載 worker 文件從主線程渲染頁面的接口，另一方面可以從 worker.ts 和 nodes.ts 兩個文件的代碼來理解。

在 worker.ts 中像我最初所設(shè)想的那樣包裹了一層代碼，用于自動生成 Worker 對象，并將代碼中的所有 DOM 操作都代理到模擬的 WorkerDOM 對象上：

const code = `
      'use strict';
      (function(){
        ${workerDOMScript}
        self['window'] = self;
        var workerDOM = WorkerThread.workerDOM;
        WorkerThread.hydrate(
          workerDOM.document,
          ${JSON.stringify(strings)},
          ${JSON.stringify(skeleton)},
          ${JSON.stringify(cssKeys)},
          ${JSON.stringify(globalEventHandlerKeys)},
          [${window.innerWidth}, ${window.innerHeight}],
          ${JSON.stringify(localStorageInit)},
          ${JSON.stringify(sessionStorageInit)}
        );
        workerDOM.document[${TransferrableKeys.observe}](this);
        Object.keys(workerDOM).forEach(function(k){self[k]=workerDOM[k]});
}).call(self);
${authorScript}
//# sourceURL=${encodeURI(config.authorURL)}`;
this[TransferrableKeys.worker] = new Worker(URL.createObjectURL(new Blob([code])));

在 nodes.ts 中，實現(xiàn)了真實元素節(jié)點的構(gòu)造和存儲（基于存儲數(shù)據(jù)結(jié)構(gòu)是否以及如何在渲染階段有優(yōu)化還需進一步研究源碼）。

同時，在 transfer 目錄下的源碼，定義了邏輯層和 UI 渲染層的消息通信的規(guī)范。

總的來看，AMP WorkerDOM 的方案拋棄了上層框架的約束，通過從底層構(gòu)造了 DOM 所有相關(guān) API 的方式，真正做到了與框架技術(shù)棧無關(guān)。它一方面完全可以作為上層框架的底層實現(xiàn)，來支持各種上層框架的二次封裝遷移（如工程 amp-react-prototype），另一方面結(jié)合了當前主流 JavaScript 沙箱方案，通過模擬 window、document 全局方法的并代理到主線程的方式實現(xiàn)了部分的 JavaScript 沙箱隔離（暫時沒看到路由隔離的相關(guān)代碼實現(xiàn)）。

當然，從我個人角度來看，AMP WorkerDOM 也有其當前在落地上一定的局限性。一個是對當前主流上層框架如 Vue、React 等的遷移成本及社區(qū)生態(tài)的適配成本，另一個是其在單頁應用下的尚未看到有相關(guān)實現(xiàn)方案，在大型 PC 微前端應用的支持上還無法找到更優(yōu)方案。

其實，在了解完 AMP WorkerDOM 的實現(xiàn)方案之后，基于 react-worker-dom 思路的后續(xù)方案也可以有個大概方向了：渲染通信的后續(xù)過程，可考慮結(jié)合 Browser VM 的相關(guān)實現(xiàn)，在生成 Worker 對象的同時，也生成一個 iframe 對象，然后將 DOM 下的操作都通過 postMessage 發(fā)送到主線程后，以與其綁定的 iframe 兌現(xiàn)來執(zhí)行，同時，通過代理將具體的渲染實現(xiàn)再轉(zhuǎn)發(fā)給原 WorkerDomNodeImpl.js 邏輯來實現(xiàn) DOM 的實際更新。

小結(jié)與一些個人前瞻

首先聊一聊個人的一些總結(jié)。Web Worker 下實現(xiàn)微前端架構(gòu)下的 JavaScript 沙箱最初是出于一點個人靈光的閃現(xiàn)，在深入調(diào)研后，雖然最終還是因為這樣那樣的問題導致在方案落地上無法找到最優(yōu)解從而放棄采用社區(qū)通用方案，但仍不妨礙我個人對 Web Worker 技術(shù)在實現(xiàn)插件類沙箱應用上的持續(xù)看好。插件機制在前端領(lǐng)域一直是津津樂道的一種設(shè)計，從 Webpack 編譯工具到 IDE 開發(fā)工具，從 Web 應用級的實體插件到應用架構(gòu)設(shè)計中插件擴展設(shè)計，結(jié)合 WebAssembly 技術(shù)，Web Worker 無疑將在插件設(shè)計上占據(jù)舉足輕重的地位。

其次是一些個人的一些前瞻思考。其實從 Web Worker 實現(xiàn) DOM 渲染的調(diào)研過程中可以看到，基于邏輯與 UI 分離的思路，前端后續(xù)的架構(gòu)設(shè)計有很大機會能夠產(chǎn)生一定的變革。目前不管是盛行的 Vue 還是 React 框架，其框架設(shè)計不論是 MVVM 還是結(jié)合 Redux 之后的 Flux，其本質(zhì)上仍舊還是由 View 層驅(qū)動的框架設(shè)計（個人淺見），其具備靈活性的同時也產(chǎn)生著性能優(yōu)化、大規(guī)模項目層級升上后的協(xié)作開發(fā)困難等問題，而基于 Web Worker 的邏輯與 UI 分離，將促使數(shù)據(jù)獲取、處理、消費整個流程的進一步的業(yè)務分層，從而固化出一整套的 MVX 設(shè)計思路。

當然，以上這些我個人還處于初步調(diào)研的階段，不成熟之處還需多加琢磨。且聽之，后續(xù)再實踐之。