Web-Worker

咱们都晓得，浏览器执行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通信。

圣诞节为集团活动制作了一款竞速（戳手指）类的H5互动小游戏，在这个的开发过程中第一次体验了Web Worker的功能，感觉还是不错的，整理分享一下。使用缘由由于这次制作的H5互动小游戏需要针对点击速度进行动效的更新，然后游戏场景中有很多的元素，在使用canvas的过程中，发现在安卓机上面会出现快速点击之后页面卡顿的现象，由于动画的卡顿，导致页面上面的计时器（setInterval）被卡停了，最终出现了安卓机的游戏结果拉了IOS一条街，这不科学啊。本次H5游戏的相关处理不做主要内容，可能会是由于自己处理优化不够导致的问题，请大家勿深究。分析原因，应该是页面的动画频繁渲染，导致计时器处理事件被阻塞了，这也是JavaScript处理是单线程的一个直接结果。所以就想到了Web Worker是否可以解决我的问题，来处理计时器的计算呢？JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。Web Worker当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web Worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 Web Worker 在后台运行。Web Worker的基本原理就是在当前JavaScript的主线程中，使用Worker类加载一个JavaScript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。所以你可以在前台做一些小规模分布式计算之类的工作，不过Web Worker有以下一些使用限制：Web Worker无法访问DOM节点；Web Worker无法访问全局变量或是全局函数；Web Worker无法调用alert()或者confirm之类的函数；Web Worker无法访问window、document之类的浏览器全局变量；使用Web Worker支持性检测 if(typeof(Worker)!==“undefined”) { alert(‘支持worker’) } else { alert(‘不支持worker’) }创建worker.jsvar self =this;self.addEventListener(‘message’, function (e) { var data = e.data; switch (data.cmd) { case ‘start’: startTimer(); break; case ‘stop’: stopTimer(); break; default: break; };}, false);var timerId = null, gameTime = 0;var startTimer = function () { timerId = setInterval(function () { gameTime += 16; var million = String(gameTime % 1000).substr(0, 2); var second = String(Math.floor(gameTime / 1000)); second = second.length >= 2 ? second : ‘0’ + second; self.postMessage({ second: second, million: million }); }, 16);}var stopTimer = function () { clearInterval(timerId); gameTime = 0;}以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。当然，我的应用场景太简单了，web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。创建Worker对象 if(typeof(Worker)!==“undefined”) { let worker = new Worker("./worker.js"); } else { alert(‘不支持worker’) }消息处理worker.onmessage = function (event) { // 接收到worker计算相关的数据}当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。错误处理worker.onerror(function (event) { // 错误处理});终止Web Workerworker.terminate();使用后记在使用Web Worker之后，新开一个线程用于计时器的计算，从而基本解决了游戏时间的问题。由于计时器的间隔时间和发送消息的过程，可能还是和实际的间隔时间会有一定的出入，但是从活动来说已经在接受范围内了。通过这次简单的使用Web Worker，初步理解了其基本原理和使用方法，也为以后的相似情景找到了解决的路径,希望能够对遇到同样问题的朋友有所帮助。 ...