HTML Web Workers

简介

HTML 页面中执行脚本时页面是不可响应的,必须等脚本执行完成,也就是脚本会阻塞页面的渲染。
Web Worker 是 HTML5 下面的新特性,JavaScript可以独立于其他脚本运行在后台的,不会影响页面的渲染。

兼容性

IE 9 及更早版本浏览器不支持 Web Workers.
Javascript 代码

<script type="text/javascript">
function ifSupportWorker() {
	var supportOrNot = typeof(Worker) !== undefined;
	var message =  supportOrNot === true ? "supports " : "doesn't supports "
	alert("Your browser " + message + "Web Workers.")
}
</script>

效果:

创建运行脚本

创建了一个简单的后台计数器 Web Worker 脚本文件 webworker.js:
Javascript 代码

var i=0;
function startCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("startCount()",800);
}

startCount();

以上代码中关键部分是 postMessage() 方法用于向 HTML 页面传回一段消息

运行 Web Workers

说明:

  • 代码首先判断浏览器是否支持 Web Workers;
  • 创建包含运行脚本 Web Workers 对象;
  • 监听 Web Workers 对象事件用来观察执行过程;
  • 开始 Web Workers 执行10次后自动结束执行并且销毁 Web Workers 对象;

Javascript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web worker</title>
    <script type="text/javascript">
        var worker;
        function ifSupportWorker() {
            return typeof(Worker) !== undefined;
        }
        function startWorker() {
            var ifSupport = ifSupportWorker();
            var result =  document.getElementById("result");
            if(ifSupport === true) {
                  if(worker === undefined) {
                      worker = new Worker("/js/workers.js");
            }
                worker.onmessage = function(event) {
                    var count =  event.data;
                    if(count <= 10){
                        result.innerHTML = event.data;
                    }else{
                        stopWorker();
                    }
               };
            } else {
                result.innerHTML = "你的浏览器不支持 Web Workers.";
            }
        }
        function stopWorker() {
            if (worker !== undefined) {
                worker.terminate();
                worker = undefined;
                document.getElementById("result").innerHTML = "任务完成";
            }
        }
    </script>
</head>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
</body>
</html>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注