JavaScript---Web Worker使用教程
简介
web worker 是运行在后台的 JavaScript，不会影响页面的性能。例如处理类似<a href="blog.csdn.net/c_kite/article/details/69415183">高斯函数处理图片</a>这种处理信息量比较庞大时有可能会造成页面阻塞, 因此这种时候就可以通过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);
}
