HTML5 Web Workers
web worker是后台运行的JavaScript, 不会影响网页的性能.
什么是Web Worker?
在HTML页面执行脚本时, 页面在脚本执行完之前会变得迟钝.
web worker是在后台运行的JavaScript, 独立于其他脚本,不会影响页面的性能. 当web worker在后台运行，你可以执行: 点击, 选择等.
浏览器支持
IE10, 火狐, 谷歌, 苹果浏览器和欧鹏浏览器都支持web worker.
HTML5 Web Workers的例子
下面创建了个简单的web worker计数的例子:
检测Web Worker支持
创建web worker之前，检测用户的浏览器是否支持:
{
// 支持Web worker!
// 相关代码.....
}
else
{
// Sorry! 不支持Web Worker..
}
创建Web Worker文件
创建额外的web worker文件.
这里, 我们创建一个计数脚本. 保存为"demo_workers.js":
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
上面代码的重要部分是 postMessage() 方法 - 用于返回HTML页面.
注意: 通常web workers 不用于这样简单的脚本，而是用于CPU密集型的任务.
创建Web Worker对象
现在我们已经有web worker文件了, 我们需要在HTML页面中调用它.
下面代码检查worker是否已经存在, 如果不存在 - 会创建一个新的web worker对象，并且在代码中运行"demo_workers.js":
{
w = new Worker("demo_workers.js");
}
然后我们可以发送和接收web worker信息.
添加"onmessage"事件监听web worker.
document.getElementById("result").innerHTML = event.data;
};
web worker提交一个信息, 代码中监听事件的执行. 来自web worker的数据存储在event.data.
终止Web Worker
当web worker对象被创建后, 它会继续监听信息(即使外部脚本完成后) 直到它终止.
终止一个web worker, 并且是否浏览器/计算机资源, 使用terminate() 方法:
Web Worker的全部例子
我们已经查看了.js文件中的Worker的代码.下面是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="对不起, 您的浏览器不支持Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
亲自试一试 »
Web Workers 和 DOM
由于web workers是外部文件, 它们不能访问如下JavaScript对象:
- The window object
- The document object
- The parent object
