首页风格
门户
博客

GBin1专题之HTML5教程 - 第十四篇:HTML5 web workers

日期:2012-4-27  来源:GBin1.com

什么是web worker?

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

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

浏览器支持

iefirefoxchromeoperasafari

除了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对象

来源:GBin1专题之HTML5教程 - 第十四篇:HTML5 web workers

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐