javascript:Web Workers入门

Web Workers入门

一.介绍

Web Workers 是Html5提供的一个多线程解决方案，我们可以将一些大计算量的代码交由web worker运行而不冻结用户界面

二.Web Workers基本用法

1.先创建一个分线程，语法如下

var worker = new Worker('分线程文件路径')

注意，此处分线程文件不能是本地文件，可以是localhost里面的文件或者网络文件，还有该分线程的文件与主线程文件必须同源，否则会报错

2.向分线程发送消息
在主线程中输入如下代码

xxx.postMessage("主线程传给分线程的内容")

注意，此处的内容可以是各种类型的数据，包括变量，二进制数据

3.在分线程中接收来自主线程的数据
在分线程文件中输入如下代码

var xxx=function(event){
var result=event.data
}

注意，此处event参数是分线程的全局特有的对象，它与window的event不是同一个对象，原因后续第三点会提及，此处event.data的值就是主线程传输过来的数据,我们可以设置一个变量来接收它（上述result）

4.在分线程文件中定义要执行的代码（对数据进行操作）
在分线程文件中输入如下代码

function dosomething(){
//dsomething
return result//返回对数据操作之后的新数据
postMessage(result)//将返回的数据传回主线程
}

5.在主线程设定接收来自分线程数据的代码
在主线程文件输入如下代码

worker.onmessage=function(event){
var result=event.data//接收
//之后可以对数据进行进一步操作，如打印输出等
}

6.关闭分线程（为节省系统资源，分线程使用完要及时关闭）
在主线程文件中输入如下代码

worker.terminate()

在分线程文件中输入如下代码

self.close()//此处self指分线程的全局对象，相对于this.close()

三.分线程不能操作页面的原因

通过在分线程中打印this后不难发现，分线程中的全局对象不再是window，由于DOM对象存在window中，所以worker线程无法获取到DOM对象，所以无法更新界面

四.Web Workers基本用法图解说明

主线程发送数据→分线程→分线程接收数据→分线程操作数据并返回新的数据→分线程将新的数据发送给主线程→主线程接收新数据→主线程进一步操作数据

补充
1.Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
2.分线程里面还可以继续创建分线程，但目前只有Firefox浏览器支持这个操作
3.Web Workers不能跨域（域名，端口，协议任意一项不同）加载js
4.不是每个浏览器都支持Web Workers
5.Web Workers会让整个程序的运行时间比原来更长（极其细微）