Web workers

功能

浏览器实现多线程编程；

使用

• 使用： var worker = new Worker('worker.js'); 自动载入worker.js，如果载入失败，则自动停止，不会执行；

• 消息传递：worker.postMessage(message)； 传递参数可以是简单值，也可以传递Json格式数据（依赖于浏览器版本和类型）。

postMessage({'key1':'value1', 'key2':'value2'});

• 消息接受：

worker.addEventListener('message', function(e){

document.getElementById('d1').innerHTML = e.data;

}, false);

参数是event类型，使用.data获取传递的值：e.data。

在任务JS文件中，同样适用self.addEventListener('message', function(e){ 接受主页面传递过来的消息。

• 特别的，在任务JS文件中，只能使用的JS特性列表：

1、navigator对象（）一个包含浏览器属性的对象[[1]]

2、location 对象，只读访问。一个包含当前URL信息的对象。[[2]]

3、XMLHttpRequest，用于在后台和服务器交换数据。[[3]]

4、setTimeout()/clearTimeout() setInterval()/clearInterval()

5、The Application Cache ，H5离线存储

6、外部的JS，使用importScripts() 引入。

7、产生其他的web workers,[[4]]

• 不能使用的特性列表：

1、DOM对象。即不能操作页面节点，需要通过消息机制，由主页面的消息接受代码来操作。

2、window对象。

3、document对象。

4、parent对象。

• importScripts 方法

importScripts('file1.js');

importScripts('file1.js', 'file2.js');

特别的，importScripts在inline 代码中，传入的必须是绝对地址，传入相对地址将报安全错误。所以如果要在worker.js文件中使用importScripts方法，一个比较好的做法是在主页面中将当前URL传递给worker，然后在worker中拼装JS文件的绝对路径。

// 主页面中

worker.postMessage({url: document.location});

// 引入代码

importScripts(url + 'engine.js');

• BlobBuilder 在主页面内创建worker代码，不需要单独js文件。

// Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder

var bb = new BlobBuilder();

bb.append("onmessage = function(e) { postMessage('msg from worker'); }");

// Obtain a blob URL reference to our worker 'file'.

// Note: window.webkitURL.createObjectURL() in Chrome 10+.

var blobURL = window.URL.createObjectURL(bb.getBlob());

var worker = new Worker(blobURL);

worker.onmessage = function(e) {

// e.data == 'msg from worker'

};

worker.postMessage(); // Start the worker.

Blob URLs 在应用程序生命周期内是全局唯一的，所以创建多个blob Urls 节省资源就要及时释放引用。使用方法： window.URL.revokeObjectURL();// window.webkitURL.createObjectURL() in Chrome 10+.

In Chrome, there's a nice page to view all of the created blob URLs: chrome://blob-internals/.

• ErrorEvent 对象

用法：

worker.addEventListener('error', onError, false);

function onError(e) {

ErrorEvent包含三个字段：

1） filename ： 发生错误的worker script文件；

2） lineno ： 发生错误的行数；

3） message： 发生错误的信息；

• 安全问题

workers 脚本文件必须是独立的，与调用页面具有相同的schema的。但是不可以使用data:URL 或者 javascript:URL 来加载脚本。

Https 页面不能启动http的脚本。

chrome浏览器的最新版本不能使用 file:// 来运行本地脚本，会默默的失败。如果要从file：// schema来运行app，使用 --allow-file-access-from-files 设置。 但是不被推荐。

• 一些推荐的web workers 应用场景

1） 预读取数据

2） 高亮语法或者其他的实时处理文本格式

3） 拼写检查

4） 解析video或者audio数据

5） 后台I/O操作或者轮训处理

6） 处理大的数据

7） <canvas> 标签中的图片过滤

8）更新本地web数据库的多行数据