webworker应用场景_聊聊webWorker

先看几个例子

结论：是？ // 带着思考看下去

背景

JavaScript引擎是单线程运行的，JavaScript中耗时的I/O操作都被处理为异步操作，它们包括键盘、鼠标I/O输入输出事件、窗口大小的resize事件、定时器(setTimeout、setInterval)事件、Ajax请求网络I/O回调等。当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到JavaScript运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。

虽然JS运行在浏览器中，是单线程的，每个window一个JS线程，但浏览器不是单线程的，例如Webkit或是Gecko引擎，都可能有如下线程：

javascript引擎线程

界面渲染线程

浏览器事件触发线程

Http请求线程

很多人觉得异步(promise async/await)，都是通过类似event loop在平常的工作中已经足够，但是如果做复杂运算，这些异步伪线程的不足就逐渐体现出来，比如settimeout拿到的值并不正确，再者假如页面有复杂运算的时候页面很容易触发假死状态，

为了有多线程功能，webworker问世了。不过，这并不意味着 JavaScript语言本身就支持了多线程，对于JavaScript 语言本身它仍是运行在单线程上的，Web Worker只是浏览器(宿主环境)提供的一个能力／API。

简介

Web Worker 是HTML5标准的一部分，这一规范定义了一套API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。工作线程允许开发人员编写能够长时间运行而不被用户所中断的后台程序， 去执行事务或者逻辑，并同时保证页面对用户的及时响应，可以将一些大量计算的代码交给web worker运行而不冻结用户界面，后面会有案例介绍

类型

Web workers可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束；这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中，“Work”类型代表Dedicated web worker，而“SharedWorker”类型代表Shared web worker。

而Shared Worker则可以被多个页面所共享(同域情况下)

如何创建

Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示：

let webworker = new Worker('myworker.js');

返回的是webworker实例对象,该对象是主线程和其他线程的通讯桥梁

主线程和其他线程可以通过

onmessage: 监听事件

postmessage: 传送事件

相关的API进行通讯

案例代码如下

//主线程 main.js

var worker = new Worker("