当前位置: 首页 > Web前端 > HTML

多线程开发之WebWorker

时间:2023-03-29 12:51:16 HTML

我们都知道浏览器是单线程执行js代码的。当执行完页面步骤后,直到步骤结束,页面才能响应其他事情。这里介绍的WebWorkers可以改变这一切。WebWorkers是后台运行的js代码,独立于其他脚本,不会影响页面的性能。我们可以继续做任何我们想做的事情:点击、选择某些东西等等,而WebWorker在后台运行。除了InternetExplorer,所有主流浏览器都支持WebWorker。生成一个worker并调用Worker()构造函数来指定要在worker线程中运行的脚本的URI。例如当前页面指定工作线程执行的脚本为script-worker.js。varmyWorker=newWorker("script-worker.js");在script-worker.js中我们可以执行额外的代码,这些代码的执行不会影响页面做其他你想做的事情,听起来不错。传输数据页面可以和worker交互传输数据,让worker在不影响页面的情况下默默计算做有意义的事情。好吧,告诉页面使用这些数据。//[主页面代码]myWorker.postMessage("data-from-mainpage");//[worker代码]onmessage=function(oEvent){console.log("主页面发送的数据是:"+oEvent。数据));};以上就是【主页面向worker脚本发送数据】的情况,是的,你看到了很贴心的postMessage,嗯,我喜欢这个东西。//[主页面代码]myWorker.onmessage=function(oEvent){console.log("worker脚本发送的数据为:"+oEvent.data));};//[Worker代码]postMessage("data-来自主页");以上就是【worker脚本向主页面发送数据】的案例,还是很简单的,不过这些只是API而已,关键是要熟练使用才能受益。另外,worker执行时可能会出错,主页面可以通过:myWorker.onerror=function(oEvent){};监控worker错误。添加了工作线程可以在不干扰UI的情况下执行任务。执行的JavaScript代码完全在另一个作用域内,不与当前网页中的代码共享作用??域。Worker全局范围内提供importScripts()方法,接收一个或多个指向JavaScript文件的URL,加载过程异步进行。importScripts()只有在你提供绝对URI时才会生效,执行过程也是异步的。当我们创建一个WebWorkers对象时,它将继续监听消息(即使在外部脚本完成之后)直到它被终止,使用myWorker.terminate()方法终止WebWorkers并释放浏览器/计算机资源。重要限制不能访问DOM节点,不能访问全局变量或全局函数,不能调用alert()或confirm等函数,不能访问window、document等浏览器全局变量;但是,WebWorker中的Javascript仍然可以使用setTimeout()和setInterval()等函数,也可以使用XMLHttpRequest对象进行Ajax通信。