Web worker

Web worker允许异步运行大量复杂耗时长的代码,这样就不会弹出long running警告。允许你在Web页面中并行地运行JavaScript程序而不阻塞用户接口,实现了对多线程编程的支持(众所周知,JavaScript是单线程的,即便是setTimeout和setInterval等实现了对多线程的模拟,本质上仍然是由JavaScript引擎以单线程调度的方式运行的)。
 
实例化,并且传入需要运行的脚本:
var worker = new Worker(“stufftodo.js”);
 
上面这行代码让浏览器下载该脚本,但是Web worker并没有运行,直到收到信息
worker.postMessage(“start!”);
 
worker.postMessage({
type: “command”,
message: “start!”
});
 
总的来说,能序列化成JSON的都能放到postMessage,参数通过复制传递进去(和xdm一样)
 
worker和页面上脚本沟通通过message和error事件
worker.onmessage = function(event){
var data = event.data;
//do something with data
}
 
 
worker.onerror = function(event){
console.log(“ERROR: “ + event.filename + “ (“ + event.lineno + “): “ +
event.message);
};
 
可以在任何时候马上停止worker,并且不会继续触发message和error
worker.terminate()
 
在Web worker运行作用域和页面完全不同,不同的全局对象,不同的其他对象和方法。不能接入Dom,不能改变页面。
 
全局对象就是worker对象本身,里面提供了一个小的环境用来数据处理:
A minimal navigator object containing onLine, appName, appVersion, userAgent, and platform properties.
A read-only location object.
setTimeout(), setInterval(), clearTimeout(), and clearInterval().
The XMLHttpRequest constructor
 
调用 worker.postMessage数据就异步传输到worker,触发message事件,监听事件来处理数据:
//inside worker code
self.onmessage = function(event){
var data = event.data;
//do something with the data
};
 
self指向worker里面的全局worker,不是页面上的worker实例。通过 postMessage把处理好的数据传回给页面:
/inside worker code
self.onmessage = function(event){
var data = event.data;
//remember, by default sort() does a string comparison
data.sort(function(a, b){
return a – b;
});
self.postMessage(data);
};
 
然后页面上的worker实例就会触发message事件:
//in the page
var data = [23,4,7,9,2,14,6,651,87,41,7798,24],
worker = new Worker(“WebWorkerExample01.js”);
worker.onmessage = function(event){
var data = event.data;
//do something with the resulting array
};
//send the array to the worker for sorting
worker.postMessage(data);
 
worker内部也可以终止自己
//inside worker code
self.close();
 
worker里面还可以导入其他脚本
/inside worker code
importScripts(“file1.js”, “file2.js”);
这个是同步的,后面的代码会等它们加载玩才继续。他们下载事件会不同,但是执行顺序是按照预先定义的.如果脚本无法加载,将抛出 NETWORK_ERROR 异常,接下来的代码也无法执行。
 
其他参考资料
原文地址:https://www.cnblogs.com/chuangweili/p/5166406.html