HTML5(四)——Web Workers

JavaScript 语言是采用单线程模型，也就是任务只能在一个线程上完成，一次只能做一件事，前面任务没执行完，后面的任务只能排队等待，由于多核 CPU 的出现，单线程带来很大不便，无法充分发挥计算机的能力。

Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。

Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。

使用 Web Worker 注意点：

2.1 创建Worker线程：

创建worker之前，先检查浏览器是否支持它。使用 typeof 检查，代码如下：

检查浏览器支持 worker 之后，主线程使用 new 命令，调用 worker() 构造函数，新建 Worker 线程。

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的任务。如果该文件加载失败，Worker 就会失败。

2.2 主线程与子线程数据通信：

主线程调用 postMessage() 方法，向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据，这个数据可以是任意格式。

紧接着 Worker 线程，通过 onmessage 指定监听函数，接收消息。worker.js 代码如下：

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

2.3 Worker线程

Worker线程内部，添加 this.onmessage 监听函数，其中 this 是子线程的全局对象，也可以替换成 self，self 代表子线程本身。等同于：

除了使用 self.onmessage 指定监听函数，也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为：

2.4 错误处理

主线程可以监听Worker是否发生错误，如果发生错误，Worker 会触发主线程的 error 事件。

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

通常情况下，Worker 载入的是一个单独的 javascript 文件，但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本，必须注意指定script标签的type属性是一个浏览器不认识的值，否则就会失去意义。如：

然后，需要读取这段代码，先将嵌入网页的脚本代码转成二进制对象，然后为这个二进制对象生成url，再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下：

Worker构造函数方法：

子进程属性方法：

Worker() 构造函数，可以接受两个参数，第一个是脚本的地址，第二个是参数是配置对象，该对象指定Worker的名称。如：

1. WebSocket API简介

首先看一段简单的javascript代码，该代码调用了WebSockets的API。

[javascript] view plaincopy

var ws = new WebSocket(“ws://echo.websocket.org”)

ws.onopen = function(){ws.send(“Test!”)}

ws.onmessage = function(evt){console.log(evt.data)ws.close()}

ws.onclose = function(evt){console.log(“WebSocketClosed!”)}

ws.onerror = function(evt){console.log(“WebSocketError!”)}

这份代码总共只有5行，现在简单概述一下这5行代码的意义。

第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的 *** 作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

多线程是属于并发范畴,而异步是数据请求方式的范畴,与同步相对。从具体使用场景来说，耗CPU的任务可以移到worker中处理，ajax主要是IO费时间，为了保证不让代码阻塞，所以异步处理，等数据到达时再通知程序。这是在html5中的变通方法，因为ajax是比较早实现的，而worker是比较新的一个概念，可以说worker的功能是覆盖ajax的，只是由于HTML的不断发展自然出现了这样的问题。

在其它语言中，一般费时任务都放在其它线程中，以避免阻塞主线程。而不管它是费CPU还是费IO。

总之，这都是HTML的错。你大可以把网络请求也放在worker中处理，但不幸的是，支持worker的浏览器并不多。

---