WebWorker

WebWorker 的标准化定义：

• Wiki Web workers are often able to utilize multi-core CPUs more effectively.[2]
• 浏览器整体兼容情况：https://caniuse.com/webworkers
• MDN guide：https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
• Worker Spec：https://html.spec.whatwg.org/multipage/workers.html#workers

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

Data is sent between workers and the main thread via a system of messages — both sides send their messages using the postMessage() method, and respond to messages via the onmessage event handler (the message is contained within the Message event’s data property). The data is copied rather than shared.

WebWorker Limitations：

• You can’t directly manipulate the DOM from inside a worker.
• You can’t use some default methods and properties of the window object.

关键类型设计：

• Worker
• WorkerLocation：doc
• SharedWorker
• WorkerGlobalScope
• DedicatedWorkerGlobalScope
• SharedWorkerGlobalScope
• WorkerNavigator：doc

理解三种 Worker

类型	Dedicated Worker	SharedWorker	ServiceWorker
简介	Worker的存在就是为JavaScript创建一个多线程的环境。Worker线程与主线程之间互不影响，各自独立运行。所以对于一些计算密集型的或者高延迟的任务，是非常友好的，这样就可以让主线程释放出来，专注于处理UI交互的任务，页面就会显得很流程。	SharedWoker不同于ServiceWorker，但是也具备WebWorker的能力。这个Worker的重点在 Shared。这个Worker可以在其他的多个页面、iframe、甚至worker里面被访问。 A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers.	ServiceWork几乎具备了Worker的能力。但是重点在 Service 上面。这个 API 旨在创建有效的离线体验。可以拦截所有请求的资源，包括 script、link、img 等标签发出的资源。可以做缓存策略，所有资源都可以缓存，包括但不仅限于 字体文件、图片文件 等。还可以做推送、和后台同步功能。
Demo	https://github.com/mdn/dom-examples/tree/master/web-workers/simple-web-worker	https://github.com/mdn/simple-shared-worker
DerivedScope	https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope WorkerGlobalScope Worker run in the worker thread with another global context which is different from current window. Global context should use self to get global context. ```javascript

self.name // name of worker self.navigator // subset of Navigator of normal Navigator API self.location // WorkerLocation self.addEventListner() // error | offline | online | languagechange | rejectionhandled | unhandledrejction self.removeEventListener() self.dispatchEvent() self.loadScripts()

self.caches; self.indexDB; self.isSecureContext; self.origin;

atob() || btoa() || clearInterval() || clearTimeout() || createImageBitmap() || fetch() || setInterval() setTimeout() || reportError()

 |  |  |
| 关联 Scope | [DedicatedWorkerGlobalScope](https://developer.mozilla.org/en-US/docs/Web/API/DedicatedWorkerGlobalScope) | [SharedWorkerGlobalScope](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorkerGlobalScope) | [ServiceWorkerGlobalScope](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope) |
| 公共 API | [https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API#supported_web_apis](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API#supported_web_apis)<br />- [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API)<br />- [Broadcase Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)<br />- [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)<br />- [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API)<br />- Console API<br />- Web Crypto API<br />- CustomEvent<br />- Encoding API: TextEncoder / TextDecoder etc.<br />- Fetch API<br />- FileReader / FileReaderSync<br />- FormData / ImageData<br />- Indexed DB<br />- Network Information API<br />- Notifications API<br />- Performance API: Performance / PerformanceEntry / PerformanceMeasure / PerformanceMark / PerformanceObserver  / PerformanceReousrceTiming<br />- Promise<br />- Server-sent events<br />- ServiceWorkerRegistration<br />- URL / WebGL with OffscreenCanvas<br />- WebSocket<br />- XMLHttpRequest<br /> |  |  |
| 特有 API | <br />- `WorkerGlobalScope.importScripts()`(all workers),<br />- `DedicatedWorkerGlobalScope.postMessage `(dedicated workers only).<br /><br /> | :::info
Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).
:::
 | - |
| 示例代码<br />API | ```javascript
var myWorker = new Worker('worker.js');
myWorker.onmessage = function(e) {
  console.log('Message received from worker');
}
myWorker.postMessage('data:xfjwoefwef');
// events
'error' | 'message' | 'messageerror' | 'rejectedhandled' | 'unhandledrejection'
// handle error
myWorker.addEventListener('error', (
  message, fileName, lineno
) => {
  // error handler
});
// time to end
myWorker.terminate();

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

// spawning more workers here
importScripts('foo.js');

// Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope.
self.close();

| ```javascript var myWorker = new SharedWorker(“worker.js”); myWorker.port.start(); myWorker.port.postMessage(‘hello’);

```javascript
var myWorker = new SharedWorker("worker.js");
myWorker.port.postMessage('hello');

onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

| https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker |

:::info Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts(). This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed. :::

Content security policy

比较重要，深度使用的时候需要理解透彻：https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#content_security_policy

经验之谈

• 整体来说是 ThreadSafe 的，如果都是序列化之后的数据

  // The structured cloning algorithm can accept JSON and a few things that JSON can't — like circular references.
  function emulateMessage(vVal) {
  return eval('(' + JSON.stringify(vVal) + ')');
  }
  

• 使用 transferring objects 来传递大型可共享的变量

  • https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects
  • 比如：ArrayBuffer MessagePort Readable/WriteableStream``TransformStream AudioData ImageBitmap``VideoFrame``OffscreenCanvas``RTCDataChannel

    // Create a 32MB "file" and fill it.
    var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
    for (var i = 0; i < uInt8Array.length; ++i) {
    uInt8Array[i] = i;
    }
    worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
    

• 减少 postMessage 的消息量 & 频率

  • 若信息量大的情况下，最好使用本地存储或者 IndexDB 类似技术
• 线程之间是完全独立的，所以不能够共享
  • 需要使用同步队列模式，类似 MessageQueue or IPC 模式
  • 基于 MessageChannel 进行通信是一种合理的实现范式

• 如果需要访问文件沙箱等主线程上才有的能力，是不显示的
• 必须严格异步化

Worker 问题

• SameOrigin 问题，如何保护用户信息？比如 Cookie 信息？做好保护 & 安全性管控？
  • 隔离的，遵循 ContentSecurityPolicy 以及 global 对象都是完全克隆过去的。

ShadowRealm

初心：The primary goal of this proposal is to provide a proper mechanism to control the execution of a program, providing a new global object, a new set of intrinsics, no access to objects cross-realms, a separate module graph and synchronous communication between both realms.

:::success 💡 ShadowRealms are complementary to stronger isolation mechanisms such as Workers and cross-origin iframes. They are useful for contexts where synchronous execution is an essential requirement, e.g., emulating the DOM for integration with third-party code. ShadowRealms avoid often-prohibitive serialization overhead by using a common heap to the surrounding context. :::

• https://tc39.es/proposal-shadowrealm/
• https://github.com/tc39/proposal-shadowrealm/blob/main/explainer.md
• https://github.com/tc39/proposal-shadowrealm
• https://fjolt.com/article/javascript-shadowrealms

ShadowRealms are a distinct global environment, with its own global object containing its own intrinsics and built-ins (standard objects that are not bound to global variables, like the initial value of Object.prototype).

declare class ShadowRealm {
    constructor();
    importValue(specifier: string, bindingName: string): Promise<PrimitiveValueOrCallable>;
    evaluate(sourceText: string): PrimitiveValueOrCallable;
}

// basic usage define
const red = new ShadowRealm();

// realms can import modules that will execute within it's own environment.
// When the module is resolved, it captured the binding value, or creates a new
// wrapped function that is connected to the callable binding.
const redAdd = await red.importValue('./inside-code.js', 'add');

// redAdd is a wrapped function exotic object that chains it's call to the
// respective imported binding.
let result = redAdd(2, 3);

console.assert(result === 5); // yields true

// The evaluate method can provide quick code evaluation within the constructed
// shadowRealm without requiring any module loading, while it still requires CSP
// relaxing.
globalThis.someValue = 1;
red.evaluate('globalThis.someValue = 2'); // Affects only the ShadowRealm's global
console.assert(globalThis.someValue === 1);

// The wrapped functions can also wrap other functions the other way around.
const setUniqueValue =
    await red.importValue('./inside-code.js', 'setUniqueValue');

/* setUniqueValue = (cb) => (cb(globalThis.someValue) * 2); */

result = setUniqueValue((x) => x ** 3);

console.assert(result === 16); // yields true

典型场景：
There are various examples where ShadowRealms can be well applied to:

• Web-based IDEs or any kind of 3rd party code execution using same origin evaluation policies.
• DOM Virtualization (e.g.: Google AMP)
• Test frameworks and reporters (in-browser tests, but also in node using vm).
• testing/mocking (e.g.: jsdom)
• Most plugin mechanism for the web (e.g., spreadsheet functions).
• Sandboxing (e.g.: Oasis Project)
• Server side rendering (to avoid collision and data leakage)
• in-browser code editors
• in-browser transpilation

:::info A ShadowRealm is ultimately a way to set up a totally new environment with a different global object, separating the code off from other realms. When we talk about a global object in Javascript, we are referring to the concept of window or globalThis. The problem that ShadowRealm ultimately tries to solve, is to reduce conflict between different sets of code, and provide a safe environment for executing and running code that needs to be run in isolation. It means less pollution in the global object from other pieces of code or packages. As such, code within a ShadowRealm cannot interact with objects in different realms. ::: :::success ShadowRealms run on the same thread as all other Javascript - so if you want to multi-thread your Javascript, you still have to use Web Workers. As such, a ShadowRealm can exist within a worker, as well as within a regular Javascript file. ShadowRealms can even exist within other ShadowRealms.

• This is usually for synchornized situations ::: ```javascript let myRealm = new ShadowRealm();

let myFunction = await myRealm.importValue(‘./function-script.js’, ‘analyseFiles’);

// Now we can run our function within our ShadowRealm let fileAnalysis = myFunctions();

// or let myRealm = new ShadowRealm();

const [ runFunction, testFunction, createFunction ] = await Promise.all([ myRealm.importValue(‘./file-one.js’, ‘runFunction’), myRealm.importValue(‘./file-two.js’, ‘testFunction’), myRealm.importValue(‘./file-three.js’, ‘createFunction’), ]);

let fileAnalysis = runFunction();

ShadowRealms on the other hand, are more efficient, allow us to easily integrate with our existing code base, and integrate well with modern Javascript technologies like Web Workers.

<a name="ioiTg"></a>
# RealCase Study

<a name="NTlYb"></a>
## PartyTown
Run third-party scripts from a web-worker.

- [https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp)
- [https://bestofreactjs.com/repo/BuilderIO-partytown-react-react-apps](https://bestofreactjs.com/repo/BuilderIO-partytown-react-react-apps)
- [https://www.youtube.com/watch?v=zqOnySYnGrQ](https://www.youtube.com/watch?v=zqOnySYnGrQ)

<a name="sBz6S"></a>
## VSCode ExtensionHost Mechanism

早期做过分析：

- [VSCode 启动时序分析](https://www.yuque.com/surfacew/daily-learn/hzkor5?view=doc_embed)

<a name="EZXzJ"></a>
## QuickJS + Wasm
:::info
强依赖于 WSAM，部分版本的浏览器兼容性存在比较大的问题，因此在面向扩展实现做兼容的时候，尤其是 Web 运行时的兼容或成为比较棘手的问题点。
:::

- QuickJS：[https://bellard.org/quickjs/](https://bellard.org/quickjs/)
   - QuickJS is a small and embeddable Javascript engine. It supports the ES2020 specification including modules, asynchronous generators, proxies and BigInt.
- QuickJS ECMAScripten：[https://www.npmjs.com/package/quickjs-emscripten](https://www.npmjs.com/package/quickjs-emscripten)
   - Javascript/Typescript bindings for QuickJS, a modern Javascript interpreter, compiled to WebAssembly.
   - SourceCode：[https://github.com/justjake/quickjs-emscripten#readme](https://github.com/justjake/quickjs-emscripten#readme)

KeyFeatures：

- Safely evaluate untrusted Javascript (up to ES2020).
- Create and manipulate values inside the QuickJS runtime ([more](https://www.npmjs.com/package/quickjs-emscripten#interfacing-with-the-interpreter)).
- Expose host functions to the QuickJS runtime ([more](https://www.npmjs.com/package/quickjs-emscripten#exposing-apis)).
- Execute synchronous code that uses asynchronous functions, with [asyncify](https://www.npmjs.com/package/quickjs-emscripten#asyncify).

```typescript
const vm = QuickJS.newContext()
let state = 0

const fnHandle = vm.newFunction("nextId", () => {
  return vm.newNumber(++state)
})

vm.setProp(vm.global, "nextId", fnHandle)
fnHandle.dispose()

const nextId = vm.unwrapResult(vm.evalCode(`nextId(); nextId(); nextId()`))
console.log("vm result:", vm.getNumber(nextId), "native state:", state)

nextId.dispose()
vm.dispose()

import { getQuickJS, shouldInterruptAfterDeadline } from "quickjs-emscripten"

getQuickJS().then((QuickJS) => {
  const result = QuickJS.evalCode("1 + 1", {
    shouldInterrupt: shouldInterruptAfterDeadline(Date.now() + 1000),
    memoryLimitBytes: 1024 * 1024,
  })
  console.log(result)
})

Figma

https://www.figma.com/blog/how-we-built-the-figma-plugin-system/ :::tips 这篇文章虽然发表于 2019 年，但是前瞻性十足，值得深入。 :::

Figma 的 Context

• Figma design editor is powered by WebGL and WebAssembly, with some of the user interface implemented in Typescript & React.
• Multiple people can be editing a file at the same time.

Figma 插件系统的设计目标：

• 安全
• 稳定
• 开发体验好
• 高性能

技术选型的演进：

	优势	劣势
iframe	- 浏览器存量 API，简单容易实现	- 有 async / await 的理解成本 - 慢，全家桶加载恶心且代价高，体验也不舒服 - 对通信结构复杂的程序，尽量避免它
eval(UNSAFE_CODE) 模式	- 让插件可以直接（而非间接）访问文档模型或者 Figma 的核心数据模型 - 让插件能够在 MainThread 中运行，使程序编写更加自然，符合直觉	- Plugin 的中断问题，可能让线程死掉 - 同源请求安全问题 - 可以做 Hijack 访问全局变量和恶意修改破坏
eval with Context 模式	在上面的基础上： - 将 window 建立 proxy 做一个 fakeWindow 防止全局变量访问	- 请求问题 - 主线程 block 问题
自己创造 JavaScript Interpreter - 编译 JS 解释器到 WSAM	- 不支持浏览器 API 独立纯净的运行时，安全可管控 - WSAM 高性能 - 有限 API 注入控制	- JIT 运行时，慢于原生的 JS - 浏览器的 debugger 无法直接使用，debug 体验并不好 - 解释器只支持 ES5 等问题，无法 follow 高级语言特性，更别用说类似 TS 直接的支持 - quickJS 可行
Realms API	- RFC 级别，原生支持 - QuickJS 可以做 mock 处理，去做 Sandbox 化	- 主进程脚本运行 - 兼容性问题

内部方案

WIP

Ref