Web Worker是H5的新特性之一,但用的比较少。其特性是在Javascript单线程执行的基础上,开启一个子线程。子程序可以和主线程相互收发数据,但是不影响主线程。且子线程不能操作页面的dom,不能通过任何方式影响页面的外观。
一、写法
1. 主线程创造一个新的worker,即子线程
var worker = new Worker("./worker.js");
2. 传递参数/数据
worker.postMessage(data);
3. 接收数据
worker.onmessage= function(event) {
//数据保存在event.data中
var data = event.data;
}
4. 异常处理
worker.onerror = function(e){
console.log(e);
}
5. 结束Worker
worker.terminate();
二、实例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function() {
var worker = new Worker("./worker.js");
//排序耗时,会影响加载性能,可以交给子线程处理
var data = [9, 0, 33, 12, 98, 10, 6, 55];
//把数组发送给worker排序
worker.postMessage(data);
//接收返回来的排序后的数组
worker.onmessage = function(e){
console.log('子线程返回排序好的数组,排序后:');
console.log(e.data);
}
worker.onerror = function(e){
//因为如果worker如果发生错误,也是悄无声息的,所以要用onerror记录异常
console.log(e.filename); //发生错误的文件名
console.log(e.lineno); //发生错误的代码行号
console.log(e.message); //完整的错误信息
}
worker.terminate(); //结束worker
};
</script>
</body>
</html>
worker.js
//子线程对主线程返回的数组进行排序后返回
onmessage = function(event) {
//来自Worker的数组,保存在event.data中
var data = event.data;
console.log('接收主线程的数组,排序前');
console.log(data);
//使用默认的sort()方法,比较字符串排序
data.sort(function(a, b){
return a - b;
});
//把处理好的数据传递给主线程
postMessage(data);
}
执行效果
注:如果在chrome浏览器中直接运行含Worker的本地的html文件,可能会报错,解决办法是可以电脑搭建本地服务器,然后通过本地服务器访问,要不然就用其他浏览器,比如火狐。
三、WorkerGlobalScope
worker.js执行的上下文,与主页面html执行时的上下文并不相同,最顶层的对象并不是window,woker.js执行的全局上下文,是个叫做WorkerGlobalScope的东东,所以无法访问window、与window相关的DOM API,但是可以与setTimeout、setInterval等协作。
WorkerGlobalScope作用域下的常用属性、方法如下:
1、self
我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用
2、location
location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象,它表示用于初始化这个工作线程的脚步资源的绝对 URL,即使页面被多次重定向后,这个 URL 资源位置也不会改变。
3、close
关闭当前线程,与terminate作用类似
4、importScripts
我们可以通过importScripts()方法通过url在worker中加载库函数
5、XMLHttpRequest
有了它,才能发出Ajax请求
6、setTimeout/setInterval以及addEventListener/postMessage