咱们都晓得,浏览器执行 js 代码是单线程的,当页面脚步执行时,页面是没方法响应别的的,直到脚步的完结,而这里介绍的 WebWorkers 就能够扭转这所有。
WebWorkers 是运行在后盾的 js 代码,独立于其余脚本,不会影响页面的性能。咱们能够持续做任何违心做的事件:点击、选取内容等等,而此时 WebWorkers 在后盾运行。
所有支流浏览器均反对 web worker,除了 Internet Explorer。
生成 worker
调用 Worker() 构造函数,指定一个要在 worker 线程内运行的脚本的 URI,例子是以后页面指定 worker 线程执行的脚步为 script-worker.js。
var myWorker = new Worker("script-worker.js");
在 script-worker.js 外面咱们能够执行额定的代码,这些代码的执行不会影响页面去干别的你想干的事件,这听起来很棒。
传递数据
页面能够和 worker 交互传递数据,这样 worker 在不影响页面干有意义的事件的状况下能够默默去计算,好了通知一下页面,应用这些数据。
//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker 代码]
onmessage = function (oEvent) {console.log("主页面发送过去的数据是:"+oEvent.data));
};
下面是【主页面发送数据给 worker 脚本】的状况,是的,你看见了十分亲切的 postMessage,好吧,我喜爱这个货色。
//[主页面代码]
myWorker.onmessage = function (oEvent) {console.log("worker 脚本发送过去的数据是:"+oEvent.data));
};
//[worker 代码]
postMessage("data-from-mainpage");
下面是【worker 脚本发送数据给主页面】的状况,仍旧很简略,不过这些只是 API,关键在于奇妙的应用才是无益的。
此外,可能 worker 执行会出错,主页面通过:
myWorker.onerror=function(oEvent){};
能够监听 worker 产生谬误。
补充阐明
worker 线程可能在不烦扰 UI 的状况下执行工作,所执行的 JavaScript 代码齐全在另一个作用域,与以后网页中的代码不共享作用域。
Worker 的全局作用域中提供了 importScripts() 办法,接管一个或多个指向 JavaScript 文件的 URL,加载过程都是异步进行。
importScripts() 只会在您提供相对 URI 的状况下失效,执行过程也是异步的。
当咱们创立 WebWorkers 对象后,它会持续监听音讯(即便在内部脚本实现之后)直到其被终止为止,应用 myWorker.terminate() 办法能够终止 WebWorkers,并开释浏览器 / 计算机资源。
重要限度
无法访问 DOM 节点,无法访问全局变量或是全局函数,无奈调用 alert() 或者 confirm 之类的函数和无法访问 window、document 之类的浏览器全局变量;
不过 Web Worker 中的 Javascript 仍然能够应用 setTimeout(),setInterval() 之类的函数,也能够应用 XMLHttpRequest 对象来做 Ajax 通信。