webwork？向webworker

这篇文章给大家聊聊关于webwork，以及向webworker对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

这两在刷头条的时候。刷到了有很多写js线程和异步任务的文章，发现有很多人知道有webworker这个神器，但遗憾的是不知道运用场景。基于此，我今天来揭开这个webworker的神秘的面纱。

webworker是html5新引进的一个api。可以实现js多线程功能。what？不是说JS是单线程吗？那么请移步从Vue.$nextTick去看JS线程和异步任务

varworker=newWorker('./worker.js');//创建一个多线程worker.js。\ncanvas基础

用过canvas绘图的同学应该知道，它提供的api中有一个可以操作像素的。varimgData=context.getImageData(x,y,width,height);\nimgData返回的是以x,y为起点，width,height为长宽的矩形中的所有像素。\nimgData有三个属性，width,height,data我们先来打印看下：\n

我们可以看到data是一个特别大的数组。这个data的长度是怎么来的呢？我简单解释下：

data.length的值＝图片的宽度*图片的高度*4，为什么是这样的呢？因为我们知道，data中存放着我们获取到的像素的值，而每一个像素是由RGBA四个通道组成。比如：data[0]表示的是第一个像素的R值，data[1]表示的是第一个像素的G值，data[2]表示的是第一个像素的B值，data[3]表示的是第一个像素的alpha（透明度）值。那么data[4]就是第二个像素的R值了，依此类推。我们可以去更改这个数组的值，生成我们想要的效果。所以我们在for循环这个数组的时候，i=i+4;这个很重要哦。

接下来我们要操作这个data，使其变灰。老规矩，先上demo

我们从刚上面的截图中可以看到data数组的长度为210000,循环操作这个数组会很消耗性能的，那么这时候webworker的优势就体现出来了。我们可以把复杂的计算放在webworker线程中去。

this.onmessage=function(e){\n\tvarimgData=e.data;\n\tconsole.log(imgData);\n\tvardata=imgData.data;\n\tvarlen=data.length;\n\t\n\tfor(vari=0;i<len;i+=4){\n\t\tvargray=data[i]*.3+data[i+1]*.59+data[i+2]*.11//得到灰度值\n\t\tdata[i]=data[i+1]=data[i+2]=gray;//再赋值给每一个像素对应的RGB\n\t}\n\tthis.postMessage(imgData);\n}\n

worker.js中，第一行的this对象指向的是DedicatedWorkerGlobalScope，它是webworker的全局作用域。

从上面的代码我们可以看到，我们把从canvas中获取到的所有的像素发送到worker中来，然后交给worker来计算。计算完成后，通过this.postMessage再将数据发回给页面中的worker对象。可以防止由于计算量过大，导致页面卡顿。

webworker是有局限性的，比如不能操作DOM，不能发ajax请求。一般我们就用于比较复杂的计算。可以充分利用多核CPU资源解决JS单线程的问题。

2、webworker基础使用，合理利用多核CUP资源帮我们处理复杂的运算。

最后希望我的分享能够帮助到大家。大家有什么问题也可在评论中提出哦。

关于本次webwork和向webworker的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。