HTM5之WEB Worker

来源：互联网发布：淘宝hd 5.0.1 ios 编辑：程序博客网时间：2024/05/16 08:59

什么是web worker?

当在HTML页面中执行脚本的时候，页面将会没有任何反馈直到脚本结束运行。

web worker是一段javascript的脚本，将会在后台独立于其它脚本执行，不影响页面的性能。你可以继续的执行你想执行的任何操作，点击，选择等等，而web worker将继续在后台执行，非常类似多进程的操作。

浏览器支持

除了IE，Firefox，Chrome，Opera和Safari 5都支持这个特性。

HTML5 web workers演示

以下这个演示将创建一个简单的web worker应用，在后台计算数字：

在线演示

检查浏览器是否支持web worker

在使用web worker前，我们需要检查浏览器是否支持：

if(typeof(Worker)!=="undefined"){
  // Yes! Web worker support!
  // Some code.....
}
else{
  // Sorry! No Web Worker support..
}

创建一个web worker文件

首先，我们这里创建一个外部的js文件。这个文件用来计算数字，保存在demo_worker.js文件中：

var i=0;
function timedCount(){
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

以上代码中最重要的部分是postMessage()方法 - 用来发送一个消息到HTML页面。

注意：正常情况下web worker不用来执行这么简单的应用，主要执行更加密集复杂的CPU任务。

创建一个web worker对象

现在我们有了一个web worker文件，我们需要从HTML文件中调用。

下面代码检测是否web worker已经存在，如果没有，则创建一个新的web worker对象，并且调用demo_workers.js脚本。

if(typeof(w)=="undefined"){
  w=new Worker("demo_workers.js"); 
}

然后我们发送并且接收web worker的信息。

添加一个onmessage事件监听方法到web worker。

w.onmessage=function(event){
  document.getElementById("result").innerHTML=event.data;
};

当web worker发布一个消息，事件监听的代码就会被执行。web worker中的数据将会保存在event.data中。

终止一个web workers

当web worker创建后，我们将持续的监听消息（甚至是外部脚本结束），除非我们终止它。

为了终止一个web worker，并且释放资源，需要使用ternmiate()方法：

w.terminate();

完整的web worker代码

<!DOCTYPE html>
<html>
<body>
 
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
 
<script>
var w;
 
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
 
function stopWorker()
{
w.terminate();
}
</script>
 
</body>
</html>

web worker 和 DOM

因为web worker是外部文件，他们没有权限访问javascript的对象：

window对象
document对象
parent对象

0 0