扣丁学堂HTML5培训浅谈HTML5多线程开发之WebWorkers

2019-07-08 14:15:12 1304浏览

我们都知道，浏览器执行js代码是单线程的，当页面脚步执行时，页面是没办法响应别的的，直到脚步的结束，而这里介绍的WebWorkers就可以改变这一切。本篇文章扣丁学堂HTML5培训小编给读者们分享一下HTML5多线程开发之WebWorkers的相关信息，感兴趣的小伙伴就随小编来了解一下吧。

WebWorkers是运行在后台的js代码，独立于其他脚本，不会影响页面的性能。我们可以继续做任何愿意做的事情：点击、选取内容等等，而此时WebWorkers在后台运行。

所有主流浏览器均支持web worker，除了Internet Explorer。

第一步：生成worker。

调用Worker()构造函数，指定一个要在worker线程内运行的脚本的URI，例子是当前页面指定worker线程执行的脚步为script-worker.js。

var myWorker = new Worker("script-worker.js");

在script-worker.js里面我们可以执行额外的代码，这些代码的执行不会影响页面去干别的你想干的事情，这听起来很棒。

第二步：传递数据。

页面可以和worker交互传递数据，这样worker在不影响页面干有意义的事情的情况下可以默默去计算，好了告诉一下页面，使用这些数据。

//[主页面代码]
myWorker.postMessage("data-from-mainpage");

//[worker代码]
onmessage = function (oEvent) {

    console.log("主页面发送过来的数据是："+oEvent.data));    
};

上面是【主页面发送数据给worker脚本】的情况，是的，你看见了非常亲切的postMessage。

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
 
     console.log("worker脚本发送过来的数据是："+oEvent.data));
     
 }; 
//[worker代码]
postMessage("data-from-mainpage");

上面是【worker脚本发送数据给主页面】的情况，依旧很简单，不过这些只是API，关键在于巧妙的使用才是有益的。

此外，可能worker执行会出错，主页面通过:

myWorker.onerror=function(oEvent){};

可以监听worker发生错误。

第三步：重要几点。

worker线程能够在不干扰UI的情况下执行任务，所执行的JavaScript代码完全在另一个作用域，与当前网页中的代码不共享作用域。

Worker的全局作用域中提供了importScripts()方法，接收一个或多个指向JavaScript文件的URL，加载过程都是异步进行。

importScripts()只会在您提供绝对URI的情况下生效，执行过程也是异步的。

当我们创建WebWorkers对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止，使用myWorker.terminate()方法可以终止WebWorkers，并释放浏览器/计算机资源。

第四步：重要限制。

1、无法访问DOM节点，无法访问全局变量或是全局函数，法调用alert()或者confirm之类的函数和无法访问window、document之类的浏览器全局变量；

2、不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。

想要了解更多关于HTML5方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发视频，HTML5培训后的前景无限，行业薪资和未来的发展会越来越好的，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>