Web Worker可能的使用场景

那么真的有这么多应用场景吗？以下列举了几个场景：

• 解析一个庞大的JSON结构
• 图片／音频处理
• 大规模数据可视化

仔细想一想，这样的场景还是很特殊的，可能在实际的应用中并不多见。那么，在目前的主流前端框架是否有利用到WebWorker的特性来帮助其提升性能呢？经过调研，发现很多还在探索阶段，比如在React框架中的探索，Parashuram在2016年发布了文章《Using Webworkers to make React faster》，文章是关于如何利用Webworker提升React的渲染速度，主要是把Virtual DOM的相关计算过程（如diff算法）放入WebWorker线程，从结果可以看出，在Benchmark的对比下，使用WebWorker的一方帧率有所提高，感兴趣的同学可以查看其演示示例和项目地址。这里忍不住要引用作者的一张图（如下图所示，纵轴是帧率，横轴是节点的个数），简要展示下React项目在使用WebWorker的情况下，性能的提升效果。

（图片来源：Using Webworkers to make React faster）

那么WebWorker已经面世这么了，浏览器支持也跟上了，为何其应用场景或者与主流框架的结合并没有很多见？我想可能与以下几点WebWorker的缺点相关：

• 在Webworker线程中无法访问DOM节点
• 无法与UI线程共享内存
• 与UI线程通讯的信息需要序列化
• 线程间通讯不可避免的并发问题

虽然如此，Angular背后的Google团队已经开始尝试打破这些限制，并已经在Angular 2.x中得进行了应用（WebWorker Renderer），虽然到了目前的Angular 4.x在源码中仍标识为@experimental，但相信其在将来会成为Angular框架的标配。接下来的文章内容，会分析到在Angular框架中Webworker Renderer是如何工作的，包括如下三个要点：

• 通讯信息如何序列化与反序列化？内存数据如何共享？
• 如何打破Webworker线程不能操作DOM节点的局限？
• 如何处理并发？

希望你能带着这两个问题阅读完以下的篇幅。

先感受一下

图中显示的基本是整个UI线程与WebWorker线程通讯的过程，给你来个初步的影响，可以帮助你在阅读后续内容时有个整体观的把控，图中涉及的类、方法以及过程，在接下来的文章中会一一介绍到。

介绍几个基本的类

先来看看这个RenderStroe@H_301_10@类，在Angular是被标识为@Injectable()的可注入类，其中_nextIndex是一个自增的索引号，通过allocateId函数递增分配。store和remove函数是对_lookupById和_lookupByObject两个Map类型的容器进行新增和删除操作，其中的传入的id参数作为唯一的索引号（通过allocateId函数分配而来）。最后deserialize和serialize方法分别是根据id取出内容和根据内容取出id。这意味中在RenderStore@H_301_10@中序列化就是将对象转换成一个唯一数字，而相对应的反序列化就是将数字转换为一个对象。

enum SerializerTypes {
    // RendererType2
    RENDERER_TYPE_2,// Primitive types，such as string，number，boolean
    PRIMITIVE,// An object stored in a RenderStore
    RENDER_STORE_OBJECT,}

private _serializeRendererType2(type: RendererType2): {[key: string]: any} {
    return {
      'id': type.id,'encapsulation': this.serialize(type.encapsulation),'styles': this.serialize(type.styles),'data': this.serialize(type.data),};
}

// DOM渲染通道
export declare const RENDERER_2_CHANNEL = "v2.ng-Renderer";
// DOM事件通道
export declare const EVENT_2_CHANNEL = "v2.ng-Events";
// 路由通道
export declare const ROUTER_CHANNEL = "ng-Router";

this._messageBroker = messageBrokerFactory.createMessageBroker(RENDERER_2_CHANNEL);
bus.initChannel(EVENT_2_CHANNEL);
const source = bus.from(EVENT_2_CHANNEL);
source.subscribe({next: (message: any) => this._dispatchEvent(message)});

createElement(name: string,namespace?: string): any {
  const node = this._rendererFactory.allocateNode();
  this.callUIWithRenderer('createElement',[
    new FnArg(name),new FnArg(namespace),new FnArg(node,SerializerTypes.RENDER_STORE_OBJECT),]);
  return node;
}

private callUIWithRenderer(fnName: string,fnArgs: FnArg[] = []) {
  // always pass the renderer as the first arg
  this._rendererFactory.callUI(fnName,[this.asFnArg,...fnArgs]);
}

private asFnArg = new FnArg(this,SerializerTypes.RENDER_STORE_OBJECT);

callUI(fnName: string,fnArgs: FnArg[]) {
  const args = new UiArguments(fnName,fnArgs);
  this._messageBroker.runOnService(args,null);
}

{
 'type': 'result','value': this._serializer.serialize(result,type),'id': id,}

interface PromiseCompleter {
  resolve: (result: any) => void;
  reject: (err: any) => void;
}
// ...
let completer: PromiseCompleter = undefined !;
let promise = new Promise((resolve,reject) => { completer = {resolve,reject}; });
let id = this._generateMessageId(args.method);
// 存储
this._pending.set(id,completer); 
// catch和then
promise.catch((err) => {...});
promise = promise.then((v: any) => this._serializer ? this._serializer.deserialize(v,returnType) : v); 
// ... 反馈时
if (message.type === 'result') {
    this._pending.get(id) !.resolve(message.value);
} else {
    this._pending.get(id) !.reject(message.value);
}
this._pending.delete(id);
// ...

export function bootstrapWorkerUi(
    workerScriptUri: string,customProviders: Provider[] = []): Promise<PlatformRef> {
  // For now,just creates the worker ui platform...
  const platform = platformWorkerUi([
    {provide: WORKER_SCRIPT,useValue: workerScriptUri},...customProviders,]);
  return Promise.resolve(platform);
}

@Injectable()
export class WebWorkerInstance {
  public worker: Worker;
  public bus: MessageBus;
  /** @internal */
  public init(worker: Worker,bus: MessageBus) {
    this.worker = worker;
    this.bus = bus;
  }
}

{
    provide: PLATFORM_INITIALIZER,useFactory: initWebWorkerRenderPlatform,multi: true,deps: [Injector]
}

const webWorker: Worker = new Worker(url);
const sink = new PostMessageBusSink(webWorker);
const source = new PostMessageBusSource(webWorker);
const bus = new PostMessageBus(sink,source);
WebWorkerInstance.init(webWorker,bus);

// initialize message services after the bus has been created
const services = injector.get(WORKER_UI_STARTABLE_MESSAGING_SERVICE);
// 这里的 WORKER_UI_STARTABLE_MESSAGING_SERVICE 在应用中归根到底其实就是调用的MessageBasedRenderer2类
zone.runGuarded(() => { services.forEach((svc: any) => { svc.start(); }); });