084_html5WebWorkers

1. web worker是运行在后台的JavaScript, 不会影响页面的性能。

2. 什么是Web Worker?

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

2.2. web worker是运行在后台的JavaScript, 独立于其他脚本, 不会影响页面的性能。您可以继续做任何愿意做的事情: 点击、选取内容等等, 而此时web worker在后台运行。

3. 浏览器支持: 所有主流浏览器均支持web worker, 除了Internet Explorer。

4. 检测 Web Worker 支持

4.1. 在创建web worker之前, 请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined") {// Yes! Web worker support!// Some code.....
} else {// Sorry! No Web Worker support..
}

5. 创建web worker文件

5.1. 现在, 让我们在一个外部JavaScript中创建我们的web worker。

5.2. 在这里, 我们创建了计数脚本。该脚本存储于"demo_workers.js"文件中:

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

5.3. 以上代码中重要的部分是postMessage()方法: 它用于向html页面传回一段消息。

5.4. 注释: web worker通常不用于如此简单的脚本, 而是用于更耗费CPU资源的任务。

6. 创建Web Worker对象

6.1. 我们已经有了web worker文件, 现在我们需要从html页面调用它。

6.2. 下面的代码检测是否存在worker, 如果不存在, 它会创建一个新的web worker对象, 然后运行"demo_workers.js"中的代码:

if(typeof(w) == "undefined") {w = new Worker("demo_workers.js"); // 服务器上的一个js文件
}

6.3. 然后我们就可以从web worker发生和接收消息了。

6.4. 向web worker添加一个"onmessage"事件监听器:

w.onmessage = function(messageEvent) {document.getElementById("result").innerHTML = messageEvent.data;
};

6.5. 当web worker传递消息时, 会执行事件监听器中的代码。event.data中存有来自event.data的数据。

7. 终止Web Worker

7.1. 当我们创建web worker对象后, 它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

7.2. 如需终止web worker, 并释放浏览器/计算机资源, 请使用terminate()方法:

w.terminate();

8. 完整的Web Worker实例代码

8.1. 新建一个名叫WebWorkers的动态Web工程

8.2. worker.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta charset="utf-8" /><title>Web Workers</title></head><body><p>计数: <output id="result"></output></p><button onclick="startWorker()">开始 Worker</button> <button onclick="stopWorker()">停止 Worker</button><br /><br /><script type="text/javascript">var w;function startWorker() {if(typeof(Worker) !== "undefined") {if(typeof(w) == "undefined") {w = new Worker("demo_workers.js");}w.onmessage = function (messageEvent) {document.getElementById("result").innerHTML = messageEvent.data;};} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";}}function stopWorker() { w.terminate();}</script></body>
</html>

8.3. demo_workers.js

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

8.4. 启动服务器, 访问worker.html

9. Web Workers和DOM

9.1. 由于web worker位于外部文件中, 它们无法访问下例JavaScript对象:

9.1.1. window对象

9.1.2. document对象

9.1.3. parent对象

084_html5WebWorkers

084_html5WebWorkers相关推荐

最新文章

热门文章