一、webWorker之初体验 |
在"setTimeout那些事儿"中,说到JavaScript是单线程。也就是同一时间只能做同一事情。
成都创新互联专业为企业提供汉台网站建设、汉台做网站、汉台网站设计、汉台网站制作等企业网站建设、网页设计与制作、汉台企业网站模板建站服务,十年汉台做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
也好理解,作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?
所以,JavaScript是单线程也是有背景的。
如下:
singleThread
但,HTML5引入了一个工作线程(webWorker)的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的响应。
简而言之,就是允许JavaScript创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。
从而,可以用webWorker来处理一些比较耗时的计算。
如下,主页面:
worker
下面是worker.js的内容:
var i = 0;function timedCount(){ for(var j = 0, sum = 0; j < 100; j++){ for(var i = 0; i < 100000000; i++){ sum+=i; }; }; //将得到的sum发送回主线程 postMessage(sum); };//将执行timedCount前的时间,通过postMessage发送回主线程postMessage('Before computing, '+new Date()); timedCount();//结束timedCount后,将结束时间发送回主线程postMessage('After computing, ' +new Date());
上面代码执行的流程是:创建的worker对象,并用onmessage方法接收worker.js里面postMessage传递过来的数据(event.data),并将数据追加到div#result中。
所以,执行上面的代码结果如下:
图一
待worker.js中的timedCount方法运算完后,执行postMessage操作,向主线程传数据,得图二。期间,并不影响主线程的运作。
图二
二、webWorker之常用API |
接下来,再来看看关于worker的常用API:
1、postMessage(data)
子线程与主线程之间互相通信使用方法,传递的data为任意值。
//worker = new Worker('url');//worker.postMessage传递给子线程数据,对象worker.postMessage({first:1,second:2});//子线程中也可以使用postMessage,如传递字符串postMessage(‘test’);
2、terminate()
主线程中终止worker,此后无法再利用其进行消息传递。注意:一旦terminate后,无法重新启用,只能另外创建。
//worker = new Worker('url');worker.terminate();
如,主页面:
worker