webworker应用场景_web worker

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()。

// 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.

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.

这种方式引用外部脚本时，需要使用绝对路径方式来引用，或者在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中的图片过滤

更新本地数据库多条记录