介绍
大家都知道,Javascript是单线程的,所以如果页面中的Javascript有大量计算的话,很容易阻塞页面的动画或者交互响应。
HTML5中的Web Worker就使Javascript的多线程编程成为可能。
使用
Web Worker是一段运行在后台的Javascript代码,不会影响页面性能。我们可以通过new Worker
来创建一个Web Worker。
// 创建Web Worker
var worker = new Worker("task.js");
// 向Web Worker传递消息
worker.postMessage( {
index: 1,
msg: ‘Hello task‘
} );
//设置postMessage的监听
worker.onmessage = function(message) {
var data = message.data;
console.log(JSON.stringify(data));
// terminate 方法用于停止worker的继续运行
worker.terminate();
};
worker.onerror = function(error){
worker.terminate();
console.log(error.filename, error.lineno, error.message);
}
下面是task.js的代码
onmessage = function(message) {
var data = message.data;
data.msg = ‘Hello main‘;
postMessage(data);
}
从上面的例子中,可以看出,Web Worker与主页面之间通过postMessage来完成通信。
总结
在Web Worker中,没有window,document,DOM等对象。但是可以使用navigator,location,XMLHttpRequest等对象。
上面的限制导致了Web Worker一般用于有耗时较长的业务中,比如有大量计算的页面。