Más contenido relacionado Similar a HTML5 Web workers (20) HTML5 Web workers4. 什么是 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
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
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