html5新特性：Web Workers文件调用与对象创建

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 关于web worker的应用大概分为三个部分：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7874.html

• 一. 创建 web worker 文件，worker文件是一个单独的js文件，写好逻辑后，通过postMessage()方法吧数据发送出去
• 二. 调用页面创建worker对象，var w = new Worker("worker文件路径").然后通过实例对象调用onmessage事件进行监听，并获取worker文件里返回的数据
• 三.终止web worker，当我们的web worker创建后会持续的监听它，需要中止的时候则使用实例上的方法w.terminate()。

下面是个简单的 web worker文件 `文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7874.html

// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();
复制代码

` 在html页面调用worker文件，并创建worker对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7874.html

`文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7874.html

<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>

var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("worker.js");    // 创建worker实例对象
    }
  w.onmessage = function (event) {  // 通过onmessage事件接收数据
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();  // 停止worker任务
}
复制代码

` 注意：由于Worker属于外部文件，因此它不能获取javascript这些对象： window 对象，document 对象，parent 对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7874.html