JavaScript---Web Worker使用教程

简介

web worker 是运行在后台的 JavaScript，不会影响页面的性能。例如处理类似高斯函数处理图片这种处理信息量比较庞大时有可能会造成页面阻塞, 因此这种时候就可以通过Worker创建一个线程在后台处理信息, 当处理完成时会把信息返回回来.

兼容性

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

Worker运行环境

• 一个navigator对象, 只包含四个属性: appName, appVersion, userAgent和platform
• 一个location对象(与window.location相同), 不过所有属性都是只读
• 一个self对象, 指向全局worker对象.
• 一个importScripts( )方法, 用来加载Worker所用到的外部javascript文件
• 所有的ECMAScript对象, 诸如: Object, Array, Date等.
• XMLHTTPRequest构造器
• setTimeout( ) 和 setInterval( )
• 一个close( )方法, 它能立刻停止worker运行

由于Web Worker有着不同的全局环境, 因此你无法出从Javascript代码中创建它. 事实上, 你需要创建一个完全独立的JavaScript文件, 其中包含了需要在Worker中运行的代码. 要创建网页人工线程, 你必须传入这个Javascript文件的URL:

var worker = new Worker("code.js");

此代码一旦执行, 将为这个文件创建一个新的线程和一个新的Worker运行环境. 该文件会被异步下载, 直到文件下载并执行完成后才会启动此Worker

与Worker通信

worker与网页代码通过事件接口进行通信. 网页代码可以通过postMessage( )方法给worker传递数据, 它接收一个参数, 即需要传递给Worker的数据. 此外, Worker还有一个用来接收信息的onmessage事件处理器. 例如:

var worker = new Worker("code.js");
worker.onmessage = function(event) {
    alert(event.data);
}
worker.postMessage("Hi");

Worker通过触发message事件来接收数据. 定义onmessage事件处理器之后, 该事件对象具有一个data属性用于存放传入的数据. Worker可通过它自己的postMessage( )方法把信息传给页面:

//code.js内部代码
//self是全局worker对象
self.onmessage = function(event) {
    self.postMessage("Hello!");
}

加载外部文件

importScripts( )的调用过程是阻塞的, 直到所有文件加载并执行完成之后, 脚本才会继续运行. 由于Worker在UI线程之外运行, 所以这种阻塞并不会影响UI响应.

//code.js内部代码
importScripts("file1.js", "file2.js");

self.onmessage = function( ) {

}

实际应用

Web Worker适用于那些处理纯数据, 或者与浏览器UI无关的长时间运行脚本.

例: 解析一个很大的JSON字符串, 正常执行需大概500毫秒, 因此这时可以使用Web Worker. 见下方代码.

var worker = new Worker("code.js");

//数据就位时, 调用事件处理器
worker.onmessage = function(event) {

    //JSON结构被回传回来
    var jsonData = event.data;

    //使用JSON
    execute(jsonData);
}

//传入要解析的大段JSON字符串
worker.postMessage(jsonText);




//code.js文件内部代码, worker解析
self.onmessage = function(event) {
    //JSON字符串由event.data传入

    //解析
    var jsonData = JSON.parse(jsonText);

    //回传结果
    self.postMessage(jsonData);
}