HTML5 Web Workers

HTML5 web workers是运行在后台的JavaScript,不会影响页面的性能。

 

什么是web worker?

当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本运行完成。

而在HTML5 中的web worker是运行在后台的JavaScript,独立于其它的脚本,不会影响页面的性能。您可以继续做任何其它愿意做的事件,如:点击,选择内容等等,

而此时web worker是在后台运行的,所以不会影响页面的性能。

 

实例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">

</style>
<script type="text/javascript">
function startWorker() {
var w;
if (typeof (Worker) !== "undefined") {//在创建web worker之前,请检查您的浏览器是否支持它。
if (typeof (w) == "undefined") {//检查web worker对象是否存在,如果不存在则创建一个新的web worker对象
w = new Worker("webWorker.js");
}
w.onmessage = function (event) {//向web worker对象添加一个事件监听器
document.getElementById("result").innerHTML = event.data;
};

}
else {
document.getElementById("result").innerHTML = "Sorry!,您的浏览器不支持HTML5中的web worker.";
}
}
function stopWorker() {
w.terminate();//terminame()方法终止浏览器或计算机资源
w = undefined;
}
</script>
</head>
<body>
<p>计数:<output id="result">0</output></p>
<button type="button" onclick="startWorker()">点击开始</button>
<button type="button" onclick="stopWorker()">点击停止</button>
</body>
</html>

webWorker.js文件代码如下:

var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);//postMessage()方法是用来向HTML页面传回一段消息
setTimeout("timedCount()", 1000);
}
timedCount();

posted @ 2015-11-19 22:53  melao2006  阅读(145)  评论(0编辑  收藏  举报