我们知道客户端JavaScript其中一个基本的特性就是单线程:比如,浏览器无法同时运行两个事件处理程序,它也无法在一个事件处理程序运行的时候触发一个计时器。随着Web应用复杂性的与日俱增,越来越复杂的计算在所难免。长时间运行的JavaScript进程会导致浏览器冻结用户界面,让人感觉屏幕“冻结”了,这就造成了用户体验问题,这时候要解决这个问题就需要用到多线程操作了(多线程简单来说就是你干着这件事的同时还能做其他事情,而这两件事之间不会发生冲突)在Web Workers标准中,定义了解决客户端JavaScript无法多线程的问题。其中定义的“Worker”是指执行代码的并行线程(或者叫后台线程)。
一、worker的使用
1、怎样新建一个线程
要创建一个线程只需要实例化一个Worker对象出来就行了,然后传入对应的参数即需要在worker中运行的js脚本的url
实例:
index.js文件
var worker = new Worker(“test.js”);
这样我们就创建好了一个并行线程。
2、如何传递数据
在web workers标准中,给我们提供了一个postMissage方法来传递数据,通过message事件来接受数据。
(1)数据从并行线程传递到js主线程
实例:
test.js文件
function test(n,m){
return n*m;
}
var res = test(2,3);
postMessage(res);
index.js文件
var worker = new Worker(“test.js”);
worker.onmessage = function(e){
console.log(e.data);//6
}
这里e.data的值即为在并行线程中传递过来的数据
(2)数据从主线程传递到js并行线程
实例:
index.js文件
var worker = new Worker("test.js");
workder.postMessage("本大爷从主线程而来!")
test.js文件
onmessage = function(e){
console.log(e.data);//本大爷从主线程而来!
}
这样就完成了数据的相互传递,如果传递的数据不止一个,可以通过对象形式传入多个(可以随便传递任何形式的对象数据),比如:
test.js文件
var msg = “我是并行线程中的数据”;
function test(n,m){
return n*m;
}
var res = test(2,3);
postMessage({res,msg});index.js文件
var worker = new Worker("test.js");
worker.onmessage = function(e){
console.log(e.data);
}
在e.data中同样可以得到在test.js文件里传入过来的两个数据。
(3)如果worker抛出异常,并且他自己没有对其进行捕获和处理,可以通过监听的一个error事件来传递异常。
实例:
index.js文件
// 记录错误消息日志:包括Worker的文件名和行数
worker.onerror = function(e) {
console.log("Error at " + e.filename + “:” + e.lineno + ": " + e.message);
}
3、如何结束并行线程
Worker对象有一个方法:terminate(),该方法强制一个worker线程结束运行。
实例:
index.js文件
worker.terminate();
二、Worker的作用域
关于Web Worker,最重要的是要知道它所执行的JavaScript代码完全在另一个作用域中,与当前网页中的代码不共享作用域*(因此在worker代码中不能进行DOM操作)*。WorkerGlobalScope全局对象表示了该新的运行环境。WorkerGlobalScope对象在某种程度上来说是大于核心的JavaScript全局对象,但又小于整个客户端的Window对象。同样在WorkerGlobalScope中也有postMessage和message方法。
WorkerGlobalScope是一个供Worker使用的全局对象,因此该对象上的postMessage方法和onmessage属性在worker代码中使用的时候,看起来像是全局函数和全局变量。因为WorkerGlobalScope是Worker的全局对象,所以它有所有核心JavaScript全局对象拥有的那些属性,诸如JSON对象、isNaN()函数和Date()构造函数,最小化的navigator 对象,包括onLine 、appName 、appVersion 、userAgent 和platform 属性; 只读的location 对象; setTimeout() 、setInterval() 、clearTimeout() 和clearInterval() 方法;XMLHttpRequest 构造函数。
WorkerGlobalScope对象上定义了一个很有意思的全局函数,importScripts,Worker可以使用此方法来加载任何需要的库代码。
实例:
test2.js文件
var num = 88888;
test.js文件
importScripts(“test2.js”);
console.log(num);//88888
在test.js文件通过importScripts引入test2.js文件,即可访问到test2脚本里面的变量。
注意:importScripts是一个同步的方法,他直到所有的脚本都已经载入并运行完成才会返回。
目前支持web workers的浏览器有IE10+、Firefox3.5+、Safari4+、Opera 10.6+、chrome和ISO版的Safari。
小结
Web workers:可以运行异步JavaScript代码,避免阻塞用户界面,在执行复杂计算和数据处理的时候,这个API非常有用,不然,这些任务轻则会占用很长时间,重则会导致用户无法与页面交互。