HTML5的Web Workers怎么创建

本篇内容主要讲解“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，在后台计数：
计数：

计数：

output> p>

开始工作者 button>
停止Worker button>

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页面的代码：
实例

计数：

output> p>

开始工作者 button>
停止工作者 button>

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怎么创建”有了更深的了解，不妨来实际操免费云主机域名作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: HTML中rp标签如何定义

这篇文章主要介绍HTML中rp标免费云主机域名签如何定义，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ HTML标签 实例 一个ruby注释： 漢 (han) 字 (zi) 浏览器支持 IE9+、Firefox、Opera、Chrome…