web Worker
web Worker 文件单独写在一个文件中，在main worker 中 执行的文件里使用下面语句启用 web Worker。 如果引用的文件是存在的，则会异步下载，下载完成后，web worker才会开始。如果资源文件加载失败（404），worker 回静默失败（fail sliently）。
var worker = new Worker('task.js');
创建worker 成功后，使用 worker.postMessage() 来启用它。
使用 Message Passing 与 worker 通信
worker 与上层页面（Parent Page）通信基于事件系统和 postMessage方法。该方法接收字符或者JSON对象作为唯一的参数，最近新一代的现代浏览器支持传入JSON对象。需要注意的是JSON对象是被复制传递的，worker 和 parent Page 操作的不是一个实例，可以理解为在接收数据时经历了编码和解码。这个特性同样适用于支持文件，二进制，ArrayBuffer等类型的浏览器。因此当使用postMessage传递较大文件的时候需要注意这个问题。为了解决这个问题可以使用transferObject[Transferring is effectively recreating the object while sharing a reference to the underlying data and then detaching the object being transferred.]它用于传递重型资源的使用权，并不是所有的对象都是适用于使用它。理解为他是引用传递，没有复制的过程，不同与引用传递的是一旦传递了该数据，那么原有的数据会被清空不可以再继续被使用，他的内容被传递到worker的上下文环境中。
main script:
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); // Send data to our worker.
worker :
self.addEventListener('message', function(e) {
self.postMessage(e.data);
}, false);
woker 可用功能
可以的：
- navigator 对象
- location （只读）
- XMLHTTPRequest
- setTimeout()/clearTimeout() and setInterval()/clearInterval()
- Application Cache
- 使用importScripts() 方法加载外部脚本
- Spawning other web workers
不可以的：
- 操作DOM
- window对象
- document 对象
- parent 对象
使用 importScripts
importScripts('script1.js');
importScripts('script2.js');
// or
importScripts('script1.js', 'script2.js');
subWorker
webWorker可以spawn subWorker。这有利于在运行时进一步分解大任务。
警告caveart：
- subWorker 必须与 parent Page 同源
- subWorker 的 URIs 是被解析为相对于
Parent Workers资源的。 - 由于 worker 之间的通信使用的 copied 方式，使用subWorker时需要注意系统资源的开销。
inline worker
再执行过程中创建一个worker， 或者创建内建页面而不是独立的woker文件。使用 Blob 可以在 main logic 通过创建一个 URL 处理 woker code 。
var blob = new Blob([
"onmessage = function(e) { postMessage('msg from worker'); }"]);
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
// e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.
这个巧妙的使用了 window.URL.createObjectURL（），这方法创建了一个可以引用Dom
File or Blob 对象的简单的url 字符串。Blob URL 是唯一的并且持续应用的这个生命周期直到document unload。使用 window.URL.revokeObjectURL 来回收创建的Blob URL()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="log"></div>
<script id="worker1" type="javascript/worker">
// This script won't be parsed by JS engines
// because its type is javascript/worker.
self.onmessage = function(e) {
self.postMessage('msg from worker');
};
// Rest of your worker code goes here.
</script>
<script>
function log(msg) {
// Use a fragment: browser will only render/reflow once.
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(msg));
fragment.appendChild(document.createElement('br'));
document.querySelector("#log").appendChild(fragment);
}
var blob = new Blob([document.querySelector('#worker1').textContent]);
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
log("Received: " + e.data);
}
worker.postMessage(); // Start the worker.
</script>
</body>
</html>
这种方式引用外部脚本时，需要使用绝对路径方式来引用，或者在postMessage里传入url，手动解析域名拼合出访问的路径。
错误监听和处理
错误对象的结构：
{
filename：// 文件
lineno：// 错误行数
message：// 错误信息
}
function onError(e) {
document.getElementById('error').textContent = [
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join('');
}
function onMsg(e) {
document.getElementById('result').textContent = e.data;
}
var worker = new Worker('workerWithError.js');
worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);
worker.postMessage(); // Start worker without a message.
试用场景
- 预加载缓存数据
- 代码高亮或者实时文本格式化
- 拼写检查
- 解析视频或音频数据
- background I/O 或者 webservices 轮询
- 处理大量数组或者JSON响应
- canvas中的图片过滤
- 更新本地数据库多条记录
网友评论