# webworker

**Repository Path**: typeof/webworker

## Basic Information

- **Project Name**: webworker
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2020-11-05
- **Last Updated**: 2021-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### WebWorker 案例

实时获取答题数量，开启子worker轮询获取实时答题数量。

```
.
├── README.md
├── app.js                  1.koa服务
├── config.js               2.项目基础路径配置
├── data                    3.模拟数据
│   └── data.json    
├── package.json
├── public
│   ├── answer.html         4.答题
│   ├── index.html          5.首页
│   ├── js
│   │   ├── getPeopleNum.js 6.子线程
│   │   └── index.js        7.主线程
│   └── utils
│       └── axios.min.js    8.axios
├── router
│   ├── answer.js           9.答题路由
│   └── submit.js           10.提交答案路由


```
---
#### Web worker

- 由于JAVASCRIPT语言采用的是单线程模型,所有任务只能再一个线程上执行。早期得计算机是单核心所以没有问题。但是随着计算机能力得增强，特别是多核CPU的出现。单线程就带来很大的不便，无法充分发挥计算机的计算能力。

- 所以在HTML5的规范中提供了一个多线程的解决方案，这就是WEB-WORKER

- WEB-WORKER允许JAVASCRIPT创造多线程环境,允许主线程创建WORKER线程,将任务分配在后台运行。这样高延迟，密集型的任务可以由WORKER线程负担，主线程负责UI交互就会很流畅,不会会阻塞或拖慢


#### 浏览器支持情况

![image](http://note.youdao.com/yws/public/resource/f6042c576c71004af0b357646a723091/xmlnote/429BE0BCB6264B33B5E60F5E862EFAB9/6627)

#### 使用worker

1. 主线程

- 通过`new Worker('子线程文件路径')`创建worker

- 通过`postMessage`方法向子线程发送消息

- 通过`onmessage`事件接受子线程消息

- 主线程中关闭Worker使用`worker.terminate()`方法

- 通过`onerror`监听错误信息

2. 子线程

- 在子线程中使用其他脚本使用`importScripts('其他脚本路径')` ，通过逗号隔开可以加载多个脚本

同理向主线程通信使用`postMessage`发送消息，使用`onmessage`接受消息

3. 数据通信

- 因为在子worker中修改数据不会影响主worker，所以可以得知worker之间通信传递数据是传值不是传址；

思考一下，我们传递了几百MB的数据，默认情况下浏览器会拷贝一份出来，为了解决这个问题,JAVASCRIPT允许主线程将二进制数据直接转移给Worker,但是转移控制权后，主线程就不再能使用这些数据。这是为了防止多个线程同时修改数据的情况发生。

这种转移数据控制权的方法叫做 [Transferable Objects](https://developer.mozilla.org/zh-CN/docs/Web/API/Transferable) 这使得主线程可以快速的把数据移交给子线程。不会产生性能负担

#### 优点与缺点
- 优点

1. 独立于主线程,不造成阻塞
2. 非常适合处理高频、高延时的任务
3. 可以内部做队列机制,做为延时任务的缓冲层


- 缺点

1. 无法操作DOM,无法获取window, document, parent等对象
2. 遵守同源限制, Worker线程的脚本文件，必须于主线程同源。并且加载脚本文件是阻塞的
3. 不当的操作或者疏忽容易引起性能问题