web worker是什么？

Web Worker 是为领会决 JavaScript 在浏览器环境中没有多线程的问题。正常形况下，浏览器执行某段程序的时刻会壅闭直到运行竣事后在恢复到正常状态，而HTML5的Web Worker就是为领会决这个问题，提升程序的执行效率。 以是Web Worker  的更佳使用场景是执行一些开销较大的数据处理或盘算义务。  

web worker的兼容性

现在除了IE，其他主流浏览器都已经支持Web Worker。在建立 web worker 之前，我们一样平常需要检测用户的浏览器是否支持它，方式如下：

if(typeof(Worker)!=="undefined"){
  //支持
}else{
  //浏览器不支持
}

web worker的建立

worker是一个工具，通过组织函数Worker建立，参数就是一个js文件的路径；文件中的js代码将运行在主线程之外的worker线程； 建立worker很简朴，如下：

var myWorker = new Worker('worker.js');

注重:worker运行在另一个全局上下文中（self），这个全局上下文不同于window，以是不能在woker中接见window和DOM；

该线程分为两种：dedicated worker和shared worker；dedicated worker只能被初始化它的js上下文中使用；shared worker可以在多个js上下文中使用。通常使用的worker是dedicated worker，它的事情情况可以通过chrome的调试工具查看。

为什么引入woker?

前端开发者应该知道浏览器中 *** 和UI公用一个线程， *** 盘算历程中，不能响应UI；若是遇到盘算量对照大的义务，如操作图像像素时，会造成用户行为得不到响应。Web Worker 是为领会决 JavaScript 在浏览器环境中没有多线程的问题。支持 Web Worker 的浏览器会分外提供一个 JavaScript Runtime 供 Web Worker 使用。它的更佳使用场景是执行一些开销较大的数据处理或盘算义务。

woker是怎么事情的?

Web Worker 使用起来异常简朴，在“主线程”中执行如下操作即可建立一个 Worker 实例，通过监听 onmessage 事宜获取新闻，通过 postMessage 发送新闻：

“主线程”和Worker 之间通过 postMessage 发送新闻，通过监听 onmessage 事宜来吸收新闻，从而实现二者的通讯。

如下图所示：

焦点代码如下：

//主线程代码
var worker = new Worker('worker.js');
worker.onmessage = function (e) {
    var data = e.data;
}
var messageData = {
    message: 'hello worker!'
};
worker.postMessage(messageData);