针对HTML5的Web Worker使用攻略

网络工作者是HTML5提供的一个JavaScript的多线程解决方案，我们可以将一些大计算量的代码交由网络工作者运行而不冻结用户界面。一：如何使用工

　　Web Worker的基本原理就是在当前JavaScript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，相互互不执行执行的效果，并提供主线程和新线程之间的数据交换的接口：postMessage，onmessage。

　　那么如何使用呢，我们看一个例子：

JavaScript代码将内容复制到

//worker.js

onmessage =功能（evt）{

var d = evt.data; //通过evt.data获得发送来的数据

postMessage（d）; //将获取到的数据发送会主线程

}

　　HTML页面：test.html

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >

< html >

< <跨度风格= “宽度：汽车;高度：汽车;浮动：无;” id = “ 20_nwp” > < a样式= “文本装饰：无；” mpid = “ 20”目标= “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = head＆k0 = head＆kdi0 = 0＆luki = 6＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆ span style = “ color：＃0000ff; font-size：14px; width：auto; height：auto; float：none;” >头</跨度> </一> </跨度> >

< meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />

< script type =“ text / <一个样式= ”文字修饰：无;“ MPID = ”21“目标= ”_blank“ HREF = ” http://cpro.baidu.com/cpro/ui/ uijs.php？adclass = 0＆app_id = 0＆c = news＆cf = 1001＆ch = 0＆di = 128＆fv = 0＆is_app = 0＆jk = 619521ab1ccffd45＆k = javascript＆k0 = javascript＆kdi0 = 0＆luki = 9＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆= 1 = s＆s＆id_seller = “ 21_nwl” > javascript </ a > “ >

// WEB页主线程

var worker = new Worker（“ worker.js”）; //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

worker.postMessage（“ hello world”）; //向worker发送数据

worker.onmessage = function （evt）{//接收worker传过来的数据 < a样式= “文本装饰：无；” mpid = “ 22”目标= “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=%BA%AF%CA%FD&k0=%BA ％AF％CA％FD＆kdi0 = 0＆luki = 2＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆u = http％3 %% 2F％2F％2F％ = 0“ id = ” 22_nwl“ > 函数 </ a >

console.log（evt。 < a style = “文字装饰：无；” mpid = “ 23” target = “ _blank“ href = ” http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆u = http％3A％2F％2Fwww％2Eadmin10000％2Ecom％2Fdocument％2F1183％2Ehtml＆urlid = 0“ id = ” 23_nwl“ > 数据 </ a > ）；//输出worker发送来的数据

}

</脚本>

</头>

<身体> </身体>

</ html >

　　用Chrome浏览器打开test.html后，控制台输出“ hello world”表示程序执行成功。

　　通过这个例子我们可以抛光使用web worker主要分为以下几部分

　　WEB主线程：

　　1.通过worker = new Worker（url）加载一个JS文件来创建一个worker，同时返回一个worker实例。

　　2.通过worker.postMessage（data）方法来向worker发送数据。

　　3.绑定worker.onmessage方法来接收worker发送过来的数据。

　　4.可以使用worker.terminate（）来终止一个worker的执行。

　　工人新线程：

　　1.通过postMessage（data）方法来向主线程发送数据。

　　2.绑定的onMessage方法来接收主线程发送过来的数据。　二：工作者能做什么

　　知道了如何使用web worker，那么它到底有什么用，可以帮我们解决那些问题呢。我们来看一个fibonacci数列的例子。

　　大家知道在数学上，fibonacci数列被以递归的方法定义：F0 = 0，F1 = 1，Fn = F（n-1）+ F（n-2）（n> = 2，n∈N*），而javascript的常用实现为：

JavaScript代码将内容复制到

var fibonacci =函数（n）{

返回 n <2？n：arguments.callee（n -1）+ arguments.callee（n -2）;

};

//斐波那契（36）

　　在chrome中用该方法进行39的fibonacci数列执行时间为19097延长，而要计算40的时候浏览器直接提示脚本忙了。

　　由于javascript是单线程执行的，在求数列的过程中浏览器不能执行其他javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态。使用网络工作者将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。具体看例子：

JavaScript代码将内容复制到

//fibonacci.js

var fibonacci =函数（n）{

返回 n <2？n：arguments.callee（n -1）+ arguments.callee（n -2）;

};

onmessage =函数（事件）{

数据 </a> ，10）；

postMessage（fibonacci（n））;

};

　　HTML页面：fibonacci.html

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >

< html >

< <跨度风格= “宽度：汽车;高度：汽车;浮动：无;” id = “ 11_nwp” > < a样式= “文本装饰：无；” mpid = “ 11”目标= “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = head＆k0 = head＆kdi0 = 0＆luki = 6＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆ span style = “ color：＃0000ff; font-size：14px; width：auto; height：auto; float：none;” >头</跨度> </一> </跨度> >

< meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />

< title >网络工作者斐波那契</ title >

< script type =“ text / <一个样式= ”文字修饰：无;“ MPID = ”12“目标= ”_blank“ HREF = ” http://cpro.baidu.com/cpro/ui/ uijs.php？adclass = 0＆app_id = 0＆c = news＆cf = 1001＆ch = 0＆di = 128＆fv = 0＆is_app = 0＆jk = 619521ab1ccffd45＆k = javascript＆k0 = javascript＆kdi0 = 0＆luki = 9＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆= 1 = s＆s＆id_seller = “” 12_nwl“ > javascript </ a > “ >

onload = function （）{

var worker = new Worker（'fibonacci.js'）;

worker.addEventListener（'message'，function（event）{

var timer2 =（new Date（））。valueOf（）;

console.log（'结果：'+ event。 < a style = “文本装饰：none;” mpid = “ 13“ target = ” _blank“ href = ” http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=数据＆kdi0 = 0＆luki = 4＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆u = http％3A％2F％2Fwww％2Eadmin10000％2Ecom％2Fdocument％2F1183％2Ehtml＆urlid = 0“ id = ” 13_nwl“ > 数据 </ a > ，'时间：'+ timer2，'用时：'+（timer2-timer））;

}，错误）；

var timer =（new Date（））。valueOf（）;

console.log（'开始计算：40'，'时间：'+ timer）;

setTimeout（function（）{

console.log（'定时器 < a style = “文字装饰：无;” mpid = “ 14” target = “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=%BA%AF%CA ％FD＆k0 =％BA％AF％CA％FD＆kdi0 = 0＆luki = 2＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆u = http％3A％2F％2Fwww％2Eadmin10000％2Ecom％2Fdocument％2F1183％2Ehtml＆urlid = 0“ id = “” 14_nwl“ > 函数 </ a > 在计算数列时执行了'，'时间：'+（new Date（））。valueOf（））;

}，1000）；

worker.postMessage（40）;

console.log（'我在计算数列的时候执行了'，'时间：'+（new Date（））。valueOf（））;

}

</脚本>

</ < a样式= “文本装饰：无；” mpid = “ 15”目标= “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = head＆k0 = head＆kdi0 = 0＆luki = 6＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆ span style = “ color：＃0000ff; font-size：14px; width：auto; height：auto; float：none;” >头</跨度> </一> </跨度> >

<身体>

</ body >

</ html >

　　在Chrome中打开fibonacci.html，控制台得到如下输出：开始计算：40时间：1316508212705我在计算数列的时候执行了时间：1316508212734定时器

XML / HTML代码将内容复制到文本

< a样式= “文本装饰：无；” mpid = “ 9” target = “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k =％BA％AF％CA％FD＆k0 =％BA％AF％CA％FD＆kdi0 = 0＆luki = 2＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = span style = “ color：＃0000ff; font-size：14px; width：auto; height：auto; float：none;” >函数 </ a >

在计算数列时执行了时间：1316508213735结果：102334155时间：1316508262820用时：50115

　　这个例子说明在worker中执行的fibonacci数列的计算并不会影响到主线程的代码执行，完全在自己独立的线程中计算，只是在计算完成之后将结果发回主线程。

　　利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示，并且不会拖动恶心的脚本正忙提示。

　　下面这个例子使用了网络工作者来计算场景中的预定，场景打开时是一片一片进行进行的，一个工人只计算了一块数值。

　　http://nerget.com/rayjs-mt/rayjs.html　　三：Worker的其他尝试

　　我们已经知道Worker通过接收一个URL来创建一个worker，那么我们是否可以利用web worker来做一些类似jsonp的请求呢，大家知道jsonp是通过插入script标签来加载json数据的，而script元素在加载和执行过程中都是双向式的，如果能利用网络工作者实现初步加载将会非常不错。

　　下面这个例子将通过web worker，jsonp，ajax三种不同的方式来加载一个169.42KB大小的JSON数据

JavaScript代码将内容复制到

// /aj/webWorker/core.js

函数 $ E（id）{

返回 document.getElementById（id）;

}

onload = function （）{

//通过网络工作者加载

$ E（'workerLoad' ）.onclick = function （）{

var url = 'http://js.wcdn.cn/aj/mblog/face2' ;

var d =（new Date（））。valueOf（）;

var worker = new Worker（url）;

worker.onmessage =函数（obj）{

console.log（'web worker：' +（（（new Date（））。valueOf（）-d））;

};

//通过jsonp加载

$ E（'jsonpLoad' ）.onclick = function （）{

var url = 'http://js.wcdn.cn/aj/mblog/face1' ;

var d =（new Date（））。valueOf（）;

STK.core.io.scriptLoader（{

方法：'post' ，

网址：网址，

onComplete： function （）{

console.log（'jsonp：' +（（（new Date（））。valueOf（）-d））;

}

}）;

};

//通过 <a style =“ text-decoration：none;” mpid =“ 8” target =“ _ blank” href =“ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = ajax＆k0 = ajax＆kdi0 = 0＆luki = 8＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆u = http％2％2％2％1％2％2％1％ “ id =” 8_nwl“> ajax </a> 加载

$ E（'ajaxLoad' ）.onclick = function （）{

var url = 'http://js.wcdn.cn/aj/mblog/face' ;

var d =（new Date（））。valueOf（）;

STK.core.io.ajax（{

网址：网址，

onComplete：函数（json）{

console.log（'ajax：' +（（（new Date（））。valueOf（）-d））;

}

}）;

};

　　HTML页面：/aj/webWorker/worker.html

XML / HTML代码将内容复制到文本

<！DOCTYPE HTML >

< html >

< <跨度风格= “宽度：汽车;高度：汽车;浮动：无;” id = “ 4_nwp” > < a样式= “文本装饰：无；” mpid = “ 4” target = “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = head＆k0 = head＆kdi0 = 0＆luki = 6＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆t = tpclicked3_hc＆tu = u1922429＆ span style = “ color：＃0000ff; font-size：14px; width：auto; height：auto; float：none;” >头</跨度> </一> </跨度> >

< meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />

<标题>工人示例：负载 < a样式= “文本装饰：无；” mpid = “ 5” target = “ _blank” href = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k = data＆k0 = data＆kdi0 = 0＆luki = 4＆n = 10＆p = baidu＆q = 06011078_cpr＆rb = 0＆rs = 1＆seller_id = 1＆sid = 45fdcf1cab219561＆ssp2 = 1＆stid = 0＆ = “ 5_nwl” > 数据 </ a > </ title >

<脚本src = “ http://js.t.sinajs.cn/STK/js/gaea.1.14.js” type =“ text / <一个样式= “文字修饰：无;” MPID = “6”目标= “_blank” HREF = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=javascript&k0=javascript&kdi0=0&luki=9&n=10&p=baidu&q = 06011078_cpr＆RB = 0＆RS = 1＆seller_id = 1＆SID = 45fdcf1cab219561＆SSP2 = 1＆STID = 0＆T = tpclicked3_hc＆TU = u1922429＆U = HTTP％3A％2F％2Fwww％2Eadmin10000％2Ecom％2Fdocument％2F1183％2Ehtml＆URLID = 0" ID = “6_nwl” > <跨度风格= “颜色：＃0000ff；字体大小：14px；宽度：自动；高度：自动；浮动：无；“ > javascript </ a >

<脚本类型= “ text / javascript” src = “ http://js.wcdn.cn/aj/webWorker/core.js” > </脚本>

</头>

<身体>

<输入类型= “按钮” id = “ workerLoad”值= “网络工作者加载” > </输入>

<输入类型= “按钮” id = “ jsonpLoad”值= “ jsonp加载” > </输入>

<输入类型= “按钮” id =“ <一个样式= “文字修饰：无;” MPID = “7”目标= “_blank” HREF = “ http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=ajax&k0=ajax&kdi0=0&luki=8&n=10&p=baidu&q = 06011078_cpr＆RB = 0＆RS = 1＆seller_id = 1＆SID = 45fdcf1cab219561＆SSP2 = 1＆STID = 0＆T = tpclicked3_hc＆TU = u1922429＆U = HTTP％3A％2F％2Fwww％2Eadmin10000％2Ecom％2Fdocument％2F1183％2Ehtml＆URLID = 0" ID = “7_nwl” > <跨度风格= “颜色：＃0000ff；字体大小：14px；宽度：自动；高度：自动；浮动：无；“ > ajax </ a > 加载”

</ body >

</ html >

　　设置主机

复制代码

代码如下：

127.0.0.1 js.wcdn.cn　

　　通过http://js.wcdn.cn/aj/webWorker/worker.html访问页面然后分别通过以下方式加载数据，得到控制台输出：

复制代码

代码如下：

网络工作者：174 jsonp：25 ajax：38

　　多试一次发现通过jsonp和ajax加载数据的时间相差不大，而网络工作者的加载时间一直处于高位，所以用网络工作者来加载数据还是比较慢的，甚至是大数据量情况下也也没任何优势，可能是Worker初始化新起线程比较耗时。此外在加载过程中是无双面的之外没有任何优势。

　　那么web worker是否能支持跨域js加载呢，这次我们通过http://127.0.0.1/aj/webWorker/worker.html来访问页面，当点击“ web worker加载”加载按钮时Chrome下无任何反映，FF6下提示错误。此类我们可以知道web worker是不支持跨域加载JS的，这对于将静态文件部署到单独的静态服务器的网站来说是一个坏消息。

所以网络工作者只能用来加载同域下的JSON数据，而这方面的AJAX已经可以做到了，而且效率更高更通用还是让工人做它自己擅长的事吧。　　四：总结

　　网络工作者看起来很美好，但处处是魔鬼。

　　我们可以做什么：

　　1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

　　2.可以在worker中通过importScripts（url）加载其他的脚本文件

　　3.可以使用setTimeout（），clearTimeout（），setInterval（）和clearInterval（）

　　4.可以使用XMLHttpRequest来发送请求

　　5.可以访问navigator的部分属性

　　有那些局限性：

　　1.不能跨域加载JS

　　2.worker内部代码不能访问DOM

　　3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker，而Chrome中就不行