web worker

web worker（工作线程）是在HTML5中新增，是一个独立的线程

在JS主线程之外创建线程，可以利用多核CPU，提高JS性能

一般用于处理比较耗时的数据处理，让主线程更专注于页面渲染和交换，解决页面卡死

使用场景

• 懒加载
• 文本分析
• 流媒体数据处理
• canvas 图形绘制
• 图像处理

项目中使用的场景

1. 后端返回了大量的菜单数据（4万条）
2. 前端需要对数据根据菜单层级进行分装成固定的数据格式
3. 数据的格式化工作放在了web worker中使用

注意的地方

• 同源策略
• 不可以访问file文件(file://协议)，必要来自于网络。所以本地调试的时候需要发布服务
• 不可以访问DOM元素
• 运行在另外的上下文中，不可以访问Window
• 主线程和子线程之间避免频繁通信

使用方法

线程创建

专用线程由 Worker()方法创建，可以接收两个参数，第一个参数是必填的脚本的位置，第二个参数是可选的配置对象，可以指定 type、credentials、name 三个属性

    const worker = new Worker("worker.js");

通信（数据传递）

• 主线程

1. 发送数据：postMessage
2. 接收数据：onmessage

    worker.postMessage("主线程发送了消息数据");
    worker.onmessage = function(e) {
        console.info(e);
    }

• 工作线程

1. 发送数据：postMessage/this.postMessage/self.postMessage
2. 接收数据：onmessage/this.onmessage/self.onmessage/this.addEventListener

    // worker.js文件内部
    onmessage = function(e) {
        console.info(e.data)
    }
    
    postMessage("work 线程发送了消息");

关闭线程

• 主线程

work.terminate();

• work线程

self.close();

加载外部脚步

importScripts('script1.js');

关于数据

线程之间的数据是使用结构化克隆算法（The structured clone algorithm）进行数据通信。说起来复杂，可以理解是值拷贝，而非地址拷贝。也可以理解是JSON.stringfy()后再进行JSON.parse()

项目地址

这里很多细节没有去深究，写了一个简单的demo