以前我们总说JS是单线程的，不是多线程的。当JS在页面运行耗时较长的同步任务时，会导致页面卡顿，影响用户体验。因此，需要设置任务放入任务队列；execute任务队列中的任务不是多线程的，但是现在HTML5为我们提供了前端开发的能力——WebWorkersAPI，我们来看看WebWorker是什么，怎么用，怎么做它在实际生产中用它来输出。概述WebWorkers使Web应用程序能够在与主执行线程分开的后台线程中运行脚本操作。这样做的好处是可以在单独的线程中执行耗时的处理任务，让主（通常是UI）线程运行而不会被阻塞。它的作用是为JS创建一个多线程的运行环境，让主线程创建一个工作线程，并将任务分配给后者。主线程运行的同时，工作线程也在运行，互不干扰。工作线程运行结束后，将结果返回给主线程。这样做的好处是主线程可以将计算量大或延迟高的任务交给工作线程执行，这样主线程就会变得轻松，不会被阻塞或变慢。这并不是说JS语言本身就支持多线程能力，而是浏览器作为宿主环境为JS提供了多线程的运行环境。但是，worker一旦创建，就会一直运行，不会被主线程的活动打断。这样有利于随时响应主线程的连接，但也会造成资源的浪费，所以不宜过度使用，用完了注意关闭。.也就是说：如果worker没有实例引用，则worker空闲后会立即关闭；如果workerrealcolumnreference不为0，则worker空闲时不会关闭。看看它的兼容性浏览器IEEdgeFireFoxChromeSafariversion10+12+3.5+4+4+使用2.1限制工作线程的使用有几点需要注意同源限制工作线程执行的脚本文件必须和主线程的脚本文件同源，当然不能让工作线程在别人电脑上到处读取文件。文件限制为了安全起见，工作线程不能读取本地文件。它加载的脚本必须来自网络，需要和主线程连接。脚本同源DOM操作限制工作线程运行在不同于主线程window的另一个全局上下文中，主线程所在网页的DOM对象无法读取，document、window等对象无法获取，但可以获取navigator和location（只读）、XMLHttpRequest、setTimeout家族等浏览器API。通信限制工作线程和主线程不在同一个上下文中，不能直接通信。他们需要通过postMessage方法进行通信。该脚本限制工作线程执行警报和确认，但它可以使用XMLHttpRequest对象发送ajax请求。2.2例子在主线程中生成一个Worker线程很简单：Worker()构造函数，第一个参数是脚本的URL（必须遵守同源策略），这个参数是必须的，只有JS脚本可以加载，否则会报错。第二个参数是一个配置对象，它是可选的。它的作用之一是指定Worker的名称，以区分多个Worker线程。//主线程是关于api的，直接看例子大概就明白了，首先是worker线程的js文件：在html文件的body中：大家可以自己运行看看效果，有的上面常用的apimasters使用线程中的api，worker表示Worker的一个实例：worker.postMessage：主线程向工作线程发送消息，消息可以是任何类型的数据，包括二进制数据worker.terminate:主线程关闭工作线程worker.onmessage:指定工作线程发送消息时的回调也可以通过worker.addEventListener('message',cb)worker.onerror:指定发生错误时的回调worker线程，也可以在Worker线程中全局使用worker.addEventListener('error',cb)对象为self，代表子线程本身。这个时候this指向self，上面有一些API：在实战场景中，我个人认为WebWorker可以当做一个计算器使用。当你需要它的时候，你可以把它拿出来按一下。收起来吧~有些加密数据的加解密算法比较复杂，或者在加解密很多数据的时候，会消耗大量的计算资源，导致UI线程无响应，所以这个时候是时候使用网络工作者。使用Worker线程可以让用户更无缝地操作UI。预取数据有时为了提高数据加载速度，可以使用Worker线程提前获取数据，因为Worker线程可以使用XMLHttpRequest。预渲染在一些渲染场景中，比如渲染一个复杂的画布，需要计算反射、折射、光影、材质等效果。这些计算的逻辑可以使用Worker线程来执行，也可以使用多个Worker线程。这里有一个光线追踪的例子。在复杂的数据处理场景中，某些检索、排序、过滤、分析是非常耗时的。在这种情况下，可以使用WebWorker来完成，而不占用主线程。预加载图片有时候一个页面有很多图片，或者有几张大图，如果业务限制不考虑懒加载，也可以使用WebWorker来加载图片。可以参考这篇文章的探索，这里简单总结一下。实战中使用WebWorkers时注意：虽然使用worker线程不会占用主线程，但是启动worker会消耗资源在Webpack项目中消耗主线程资源和使用WebWorker请参考：如何在ES6下使用WebWorker+Webpack至于SharedWorker、ServiceWorker等，我们先不看。IE不喜欢在线帖子。它们中的大多数具有不同的深度。首先，甚至有一些不一致之处。以下文章是对学习过程的总结。如有发现错误，请留言指出~
