WebWorker：小帅哥，要不要开个“子线程”试试看？很快！

前言大家好。我是林三鑫。用最通俗易懂的语言解释最难的知识点是我的座右铭。奇怪的事情——WebWorkerjs为什么是单线程语言？先说说为什么JavaScript是单线程语言？我们都知道JavaScript是一门基于前端的语言，而前端的舞台就是浏览器，而浏览器拿什么取悦用户呢？传过来的是一个个DOM节点组成的页面。因此，JavaScript的最终目标一定是页面呈现的质量。JavaScript作为单线程语言的设计也是为了页面。假设JavaScript是一种多线程语言。如果有一天，线程1正在修改DOM节点，线程2也在修改同一个DOM节点，那么页面该听谁的呢？这样会造成冲突，而这在用户面前是不允许的，所以JavaScript被设计为单线程语言，你要操作的一切都必须按顺序进行。网络工作者？背景刚才说了JavaScript是单线程语言，这也造成了很多问题。不知道大家在平时开发的时候有没有遇到过这样的事情：处理一个超大的数据，导致整个代码的逻辑一时卡死。说说我遇到的场景：1.大文件切片上传带hash2.树数据前端处理时，需要短时间处理。这可能会导致什么样的假死问题？1.页面渲染的阻塞2.后续代码执行的阻塞是什么？WebWorker是为解决浏览器假死问题而构思的新技术。它是一个多线程模型，也是基于主机的。它在JavaScript线程中属于子线程，完全由主线程控制，但在WebWorker中无法操作DOM。需要保证DOM的唯一性，所以不能改变主调，但是需要一个新的线程来分担复杂的计算任务，这就是WebWorker的兼容性：WebWorker有以下特点：1.一旦创建，它不会被主线程打断。即使主线程卡住了，WebWorker还在运行。2、WebWorker也受到同源策略的限制，只能访问同源网页。3、不能操作和访问DOM。前面说了DOM的多线程操作容易引起冲突，所以禁止4.不能使用全局交互方法（alert、confirm等），其他全局方法基本可以使用。5.不能读取本地文件（其实浏览器本身是禁止JavaScript读取本地文件的，出于安全考虑）6.工作线程和主线程不共享作用域和资源。7、WebWorker有两种类型：DedicatedWebWorker：专用线程，只能在一个网页中使用SharedWebWorker：共享线程，可以在多个同源网页中共享。也是跨页面传播的手段之一。使用WebWorker场景，为了让大家看到WebWorker的效果，我新建了几个文件//index.html//index.jsconsole.time('处理数据时间')//模拟数据处理函数handleData(num){for(leti=0;i{console.log(e.data)};//使用onerror制作目标文件，即指定工作线程有消息时的回调错误worker.onerror=function(e){console.log("errorat"+e.filename+":"+e.lineno+e.message)};然后我们创建目标文件data.js，会生成一个workerthread//使用importScripts引用文件，可以参考url，本地js文件importScripts('xxxxxxx')//importScripts('xxxxxxx','xxxxxxxx')也可以传递多个//模拟数据处理函数handleData(num){for(leti=0;i{console.time('处理数据时间')constres=handleData(e.data)postMessage('处理完成')console.timeEnd('处理数据时间')}Effect看一下代码和渲染的效果，对比刚才的开始：图片渲染不阻塞：取消进程，可以使用terminate方法结束进程worker.onmessage=(e)=>{//报错时立即终止指定的worker进程worker.terminate()console.log(e.data)}个人理解，其实WebWorker并没有改变JavaScript本质上是单线程的事实。它依赖于浏览器的多线程。结语我是林三鑫，一个狂热的前端程序员。然后我们就可以交朋友了，一起钓鱼哈哈，摸摸鱼，加我，请注意[思想]