前端多线程开发,h5 多线程
众所周知,浏览器在单线程中执行js代码。当执行页面步骤时,页面直到步骤结束才能响应其他任何东西,这里介绍的WebWorkers可以改变这一切。
WebWorkers是后台运行的js代码,独立于其他脚本,不会影响页面的性能。我们可以继续做我们想做的任何事情:点击、选择内容等等,而WebWorkers在后台运行。
除了Internet Explorer,所有主流浏览器都支持web worker。
第一步:生成worker。
调用Worker()构造函数,并指定要在工作线程中运行的脚本的URI。例如,当前页面指定工作线程的执行步骤是script-worker.js
var my Worker=new Worker( script-Worker . js );在script-worker.js中,我们可以执行额外的代码。这些代码的执行不会影响页面做你想做的其他事情,听起来很棒。
第二步:传递数据。
该页面可以与工作人员交互地交流数据,以便工作人员可以在不影响页面的有意义工作的情况下进行静默计算。好吧,告诉页面,用数据。
//[主页面代码]my worker . postmessage( data-from-main page );//[worker code]on message=function(oevent){ console . log(主页面发送的数据为: oevent . data));};以上是【主页面发送数据到工作者脚本】的情况。是的,你看到了一条非常友好的留言。嗯,我喜欢这个东西。
//[主页面代码]my worker . on message=function(oevent){ console . log( worker脚本发送的数据为: oevent . data));};//[worker code]post message( data-from-main page );以上是【工人脚本向主页面发送数据】的情况,还是很简单的,但这些只是API,关键是巧用有益。
此外,在worker的执行中可能会出现错误,主页面通过:
my worker . on error=function(oEvent){ };你可以倾听工人的错误。
第三步:重要几点。
Worker线程可以在不打扰UI的情况下执行任务,执行的JavaScript代码完全在另一个作用域中,与当前网页中的代码不共享作用域。
在Worker的全局作用域中提供importScripts()方法来接收一个或多个指向JavaScript文件的URL,加载过程是异步的。
只有在提供绝对URI的情况下,ImportScripts()才会生效,并且执行过程是异步的。
当我们创建WebWorkers对象时,它将继续监听消息(甚至在外部脚本完成之后),直到被终止。使用myWorker.terminate()方法可以终止WebWorkers,释放浏览器/计算机资源。
第四步:重要限制。
1.无法访问DOM节点、全局变量或全局函数,调用alert()或confirm等函数和window、document等浏览器全局变量;
2.但是,Web Worker中的Javascript仍然可以使用setTimeout()、setInterval()或XMLHttpRequest对象之类的函数进行Ajax通信。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。