1. HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

2. Web Workers
JAVASCRIPT CONCURRENCY

3. 无响应的脚本
当在 HTML 页面中执行脚本时，页面会变得没有响应直到脚本执行完成。
安博中程在线 3/20

4. 什么是 Web Workers ?
安博中程在线
Web Workers 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续执行你想做
的任何事情：点击，选取等等，同时 Web Workers 就在后台运行。
浏览器实现 Web Workers 的方式有很多种，可以使用线程，后台进行，或者运行在其他处理器核心上的进程
等。
目前支持 Web Workers 的浏览器有 IE10+, Firefox3.5+, Safari4+, Opera10.6+, Chrome 和 iOS 版的 Safari,
Android 版的手机QQ浏览器等。
·
·
·
4/20

5. 检测浏览器是否支持 Web Workers
方法1： 检测检测 如果浏览器支持 Web Worker API 的话，全局 window 对象会有一个名为 Worker 的属性，反
之，window 对象上该属性的值为 undefined 。
方法2: 使用 Modernizr 库提供的方法 检测检测
安博中程在线
<script type='text/javascript'>
function supports_web_workers() {
return !!window.Worker;
}
</script>
JAVASCRIPT
<script type='text/javascript'>
function modernizr_web_workers() {
if (Modernizr.webworkers) {
// window.Worker 存在
} else {
// 浏览器没有提供 Web Workers 的原生支持
}
}
</script>
JAVASCRIPT
5/20

6. HTML5 Web Workers Example
一个简单的示例：创建一个简单的 Web Worker，在后台计数
计数:
启动启动 WorkerWorker 停止停止 WorkerWorker
安博中程在线 6/20

7. 创建一个 Web Worker 文件
因为实例化 Worker 对象的时候需要传入要执行的 JavaScript 文件名，所以我们需要
在外部创建一个 JavaScript 文件：
安博中程在线
vari=0;
functiontimedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
JAVASCRIPT
7/20

8. 实例化一个 Web Worker 对象
下面的代码创建了一个新的 Web Worker 对象，如果指定的 JavaScript 文件存在的
话，浏览器会生成一个新的 Worker 线程，"worker.js"文件文件被异步下载，其中的
代码被运行。
安博中程在线
varworker=newWorker("worker.js"); JAVASCRIPT
注意：Worker 脚本必须是和它们的调用页面同样 scheme 的外部文件。也就是
说，
第一，不能从一个 data URL 加载脚本
第二，一个 HTTPS 页面不能启动以 HTTP URLs 开始的 worker 脚本。
·
·
·
8/20

9. Worker 和页面之间的通信
Worker 是通过 message 事件和页面通信的，来自 Worker 的数据保存在 event.data 中。
在下面的代码中，我们给 Web Worker 对象添加了一个"onmessage"事件监听器。
在 Worker 内部调用 postMessage() 就可以发送消息到页面。
安博中程在线
worker.onmessage = function (event) {
var data = event.data;
// 对数据进行处理
document.getElementById("result").innerHTML=data;
};
JAVASCRIPT
var i=0;
function timedCount() {
i=i+1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
JAVASCRIPT
9/20

10. 使用 JSON 对象传递消息
在所有支持的浏览器中，postMessage() 都能支持对象参数，也就是说可以序列化为 JSON 结构的任何值都可以
作为参数传递给 postMessage()。
安博中程在线
<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>
<script>
function sayHI() {
worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
}
function stop() {
// Calling worker.terminate() from this script would also stop the worker.
worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
}
function unknownCmd() {
worker.postMessage({'cmd': 'foobard', 'msg': '???'});
}
var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
document.getElementById('result').textContent = e.data;
}, false);
</script>
JAVASCRIPT
10/20

11. 使用 JSON 对象传递消息
worker.js代码
安博中程在线
self.addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'start':
self.postMessage('WORKER STARTED: ' + data.msg);
break;
case 'stop':
self.postMessage('WORKER STOPPED: ' + data.msg + '. (buttons will no longer work)');
self.close(); // Terminates the worker.
break;
default:
self.postMessage('Unknown command: ' + data.msg);
};
}, false);
JAVASCRIPT
11/20

12. 使用 JSON 对象传递消息
Demo
Say HISay HI Send unknown commandSend unknown command Stop workerStop worker
安博中程在线 12/20

13. 停止 Web Worker
Web Worker 对象创建以后，直到被终止掉之前会一直监听有没有消息（即使外部的脚本已经执行完成）。
我们可以使用 terminate() 方法来终止一个 Web Worker, 同时释放浏览器和计算机资源。
在 Worker 内部，调用 close() 方法也可以停止工作。就像在页面中调用 terminate() 方法一样，Worker 停止工
作后就不会有事件发生了。
安博中程在线
// 立即停止worker 的工作
worker.terminate();
JAVASCRIPT
// Web Worker 内部的代码
self.close();
JAVASCRIPT
13/20

14. Web Worker 的作用域
安博中程在线
Web Worker 中的代码不能访问 DOM，也无法通过任何方式影响页面的外观。
Web Worker 中的全局对象是 Worker 对象本身，this 和 self 引用的都是 Worker 对象。
当页面在 Worker 对象上调用 postMessage() 时，数据会被以异步方式传递给 Worker，进而触发 Worker 中
的 message 事件；
同样，为了处理来自页面的数据，在 Worker 内部也需要创建一个 onmessage 事件处理程序
·
·
·
// 页面 的内部代码，发送数据给worker
worker.postMessage(data);
JAVASCRIPT
·
// Web Worker 的内部代码
self.onmessage = function(event) {
var data = event.data;
//......各种数据处理
self.postMessage(data); // 把数据再发回给页面
}
JAVASCRIPT
14/20

15. Web Worker 的限制
由于 Web Worker 多线程的特点，Web Worker 只能访问 JavaScript 的一些特性：
Web Worker 不能访问：
安博中程在线
navigator 对象（仅限 appCodeName, appName, appVersion, cookieEnabled, platform, userAgent）
location 对象（只读, hash, host, hostname, href, pathname, port, protocol, search）
XMLHttpRequest, importScript()
setTimeout(), setInterval(), clearTimeout() 和 clearInterval()方法
访问 Application cache 以及派生出其他 workers
·
·
·
·
·
DOM(不是线程安全的)
window 对象
document 对象
parent 对象
·
·
·
·
15/20

16. Web Worker 错误处理
Worker 内部的 JavaScript 在执行过程中碰到错误时就会触发 error 事件。
error 事件的三个属性：
安博中程在线
filename: 发生错误的文件名。
lineno: 代码行号。
message: 完整的错误信息。
·
·
·
worker.onerror = function(event) {
console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);
}
JAVASCRIPT
16/20

17. Web Worker 的应用场景
凡是比较消耗时间的操作，都可以转交给 Worker 来做而不会阻塞用户界面
安博中程在线
排序
图像处理
加密解密
......
·
·
·
·
17/20

18. Web Workers 的未来
Web Workers 标准目前在 W3C 的状态是 Candidate
Recommendation(2012/05/01)，还在继续制定和改进之中。
安博中程在线
目前我们讨论的 Workers 属于"专用 Worker"(dedicated worker)范畴，专门为某
个特定页面服务，不能在页面间共享。
Web Workers 的另外一个概念是“共享 Worker”(shared worker)，可以在浏览器
中打开同一个页面间的多个标签之间共享。
Worker 内部能访问什么，是不是能够像页面一样访问任何数据？大家还需要关注
标准的进展。
·
·
·
18/20

19. 扩展阅读
安博中程在线
Shared Workers
Web Workers in IE10: Background JavaScript Makes Web Apps Faster
Web Workers - Multithreaded Programs in JavaScript
HTML5 Web Workers
W3C - workers
Computing with JavaScript Web Workers
The Basics of Web Workers
Wikipedia: Web worker
WHATWG
MD: Using web workers
使用 jQuery 和 Web Workers 实现的一个 visualization framework
·
·
·
·
·
·
·
·
·
·
·
19/20

20. <Thank you!>
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad