H5+WebWorkers多线程开发使用详解


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来H5+WebWorkers多线程开发使用详解,H5+WebWorkers多线程开发的注意事项有哪些,下面就是实战案例,一起来看一下。

我们都知道,浏览器执行js代码是单线程的,当页面脚步执行时,页面是没办法响应别的的,直到脚步的结束,而这里介绍的WebWorkers就可以改变这一切。

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

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

第一步:生成worker。

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

1

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

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

第二步:传递数据。

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

1

2

3

4

5

6

//[主页面代码]

myWorker.postMessage("data-from-mainpage");

//[worker代码]

onmessage = function (oEvent) {

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

};

上面是【主页面发送数据给worker脚本】的情况,是的,你看见了非常亲切的postMessage,好吧,我喜欢这个东西。

1

2

3

4

5

6

//[主页面代码]

 myWorker.onmessage = function (oEvent) {

     console.log("worker脚本发送过来的数据是:"+oEvent.data));

 };

//[worker代码]

postMessage("data-from-mainpage");

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

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

1

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通信。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

webpack打包压缩js与css步骤详解

jquery fullpage插件添加头部与尾部版权相关

以上就是H5+WebWorkers多线程开发使用详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

用html5实现桌面提醒功能的一个实例代码

用h5制作烟花粒子特效的制作方法

html5中内容安全策略(csp)

详解7款绚丽的jquery/html5动画及源码

html5有哪些清空画布的方法

如何使用html5 canvas绘制一个矩形

html5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius

详细介绍websocket api html5规范翻译

h5中文件上传的详细介绍

字符编码是什么?html5如何设置字符编码?

更多相关阅读请进入《H5+WebWorkers》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...