本篇内容主要讲解“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>
<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对象
到此，相信大家对“HTML5的Web Workers怎么创建”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
