热门关键字:
jquery > jquery教程 > jquery教程 > HTML 5 Web Workers介绍

HTML 5 Web Workers介绍

333
作者:管理员
发布时间:2021/3/3 15:42:56
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4075
web worker是运行在后台的JavaScript,不会影响页面的性能。


什么是Web Worker?
当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。


web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击,拾取内容等等,而此时web worker在后台运行。


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


HTML5 Web Workers实例
下面的例子创建了一个简单的web worker,在后台计数:


计数:


<!DOCTYPE html>


<html>


<身体>


<p>计数:<output id =“ result”> </ output> </ p>


<button onclick =“ startWorker()”>开始工作者</ button> 


<button onclick =“ stopWorker()”>停止Worker </ button>


<br /> <br />


<脚本>


var w;


函数startWorker()


{


if(typeof(Worker)!==“未定义”)


  {


  if(typeof(w)==“ undefined”)


  {


  w = new Worker(“ / example / html5 / demo_workers.js”);


  }


  w.onmessage =函数(事件){


    document.getElementById(“ result”)。innerHTML = event.data;


    };


  }


别的


  {


  document.getElementById(“ result”)。innerHTML =“对不起,您的浏览器不支持Web Workers ...”;


  }


}


函数stopWorker()





w.terminate();


}


</ script>


</ body>


</ html>


检测Web Worker支持
在创建web worker之前,请检测用户的浏览器是否支持它:


if(typeof(Worker)!==“未定义”)
  {
  // 是的!网络工作者支持!
  //一些代码.....
  }
别的
  {
  // 对不起!不支持Web Worker。
  }
创建网络工作者
现在,让我们在一个外部JavaScript中创建我们的web worker。


在这里,我们创建了计数脚本。该脚本存储于“ demo_workers.js”文件中:


var i = 0;


函数timedCount()
{
i = i + 1;
postMessage(i);
setTimeout(“ timedCount()”,500);
}


timedCount();
以上代码中重要的部分是 postMessage() 方法-它用于向HTML页面传回一段消息。


注释: web worker通常不使用如此简单的脚本,或者用于更耗费CPU资源的任务。


创建Web Worker对象
我们已经有了web worker文件,现在我们需要从HTML页面调用它。


下面的代码检测是否存在worker,如果不存在,-它会创建一个新的web worker对象,然后运行“ demo_workers.js”


if(typeof(w)==“ undefined”)
  {
  w = new Worker(“ demo_workers.js”);
  }
然后我们就可以从web worker发生和接收消息了。


向web worker添加一个“ onmessage”事件监听器:


w.onmessage =功能(事件){
document.getElementById(“ result”)。innerHTML = event.data;
};
当web worker传递消息时,会执行事件监听器中的代码。


终止网络工作者
当我们创建web worker对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。


如果终止网络工作人员,并释放浏览器/计算机资源,请使用Terminate()方法:


w.terminate();
完整的Web Worker实例代码
我们已经看到了.js文件中的Worker代码。下面是HTML页面的代码:


实例
<!DOCTYPE html>
<html>
<身体>


<p>计数:<output id =“ result”> </ output> </ p>
<button onclick =“ startWorker()”>开始工作者</ button>
<button onclick =“ stopWorker()”>停止工作者</ button>
<br /> <br />


<脚本>
var w;


函数startWorker()
{
if(typeof(Worker)!==“未定义”)
{
  if(typeof(w)==“ undefined”)
    {
    w = new Worker(“ demo_workers.js”);
    }
  w.onmessage =函数(事件){
    document.getElementById(“ result”)。innerHTML = event.data;
  };
}
别的
{
document.getElementById(“ result”)。innerHTML =“对不起,您的浏览器
 不支持Web Workers ...”;
}
}


函数stopWorker()
{
w.terminate();
}
</ script>


</ body>
</ html>
网络工作者和DOM
由于web worker位于外部文件中,它们无法访问下例JavaScript对象:


window对象
document对象
parent对象




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐