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在不影响页面干有意义的事情的情况下可以默默去计算，好了告诉一下页面，使用这些数据。

//[主页面代码]
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");