Web Worker

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

---

在JavaScript程序中，你希望处理一些密集型的任务，但不希望在主线程运行（这会减慢浏览器/UI），可能你就希望程序以多线程的方式运行。

我们可以将程序分为两部分：一部分在浏览器ＵＩ主线程运行，一部分在完全独立的线程运行。并且这两部分程序可以进行通信。　在Ｗｅｂ平台ＨＴＭＬ５的一个叫做Ｗｅｂ　Ｗｏｒｋｅｒ的新特性。这是浏览器的功能，和JavaScript没有关系。

在浏览器这样的环境，很容易提供多个JavaScript引擎实例，程序中的每个多线程部分被成为一个Worker。

Web Worker可以这样被实例化。

var w1 = new Worker("http://some.url.1/mycoolworker.js")

这个URL(也可以是一个Blob URL)指向应该是一个JavaScript文件，这个文件会加载到一个Worker里，然后浏览器启动一个独立的线程，让这个文件在这个线程中作为独立的程序运行。

Worker之间不会共享资源，或只能通过事件消息机制相互联系。

w1是一个事件侦听者和触发者。可以通过订阅它来获得这个Worker发出的事件以及发送事件给这个Worker。

侦听事件

w1.addEventListener("message", function(evt){
    // evt.data
})

发送事件

w1.postMessage("something cool to send")

在这个Worker内部，收发消息是对称的

// mycoolworker.js
addEventListener("message", function(evt){
    //evt.data
})
postMessage("a really cool reply")

Worker和创建它的程序之间是一对一的关系。

Worker还能实现自己的子Worker，称为subworker。如果要终止worker，可以调用worker.terminate().

浏览器中的两个或多个页面从同一个文件URL创建Worker，最终得到的是完全独立的Worker。

不过worker 的数量也不宜太多，除UI线程之外，至少还有一个线程就好了。

Worker无法访问主程序任何资源（全局变量，页面DOM，其他资源）。但是可以执行Ajax，WebSocket，定时器，访问全局变量（navigator，location，JSON，applicationCache），通过ImportScript("foo.js")导入外部脚本，这个过程是同步的。

应用

• 处理密集型数学计算
• 大数据集排序
• 数据处理（压缩，音频分析，图像处理等）
• 高流量网络通信

关于Worker怎么创建和使用，与主程序怎么通信，应用场景就介绍这里了。

---