大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“HTML5的Web Workers怎么创建”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5的Web Workers怎么创建”吧!
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了漳县免费建站欢迎大家使用!
web worker是运行在后台的JavaScript,不会影响页面的性能。
什么是Web Worker?
当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击,拾取内容等等,而此时web worker在后台运行。
浏览器支持
所有主流浏览器均支持web worker,除了Internet Explorer。
HTML5 Web Workers实例
下面的例子创建了一个简单的web worker,在后台计数:
计数:
<!DOCTYPE html>
<身体>
计数:
<脚本>
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>
<身体>
计数:
<脚本>
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对象
到此,相信大家对“HTML5的Web Workers怎么创建”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!