Webpack 下使用 web workers 及 基本原理 和 应用场景

阅读目录

• 一：web workers的基本原理
• 二：web Workers 的基本用法
• 三：在webpack中配置 Web Workers
• 四：Web Worker的应用场景

回到顶部

一：web workers的基本原理

我们都知道，我们的javascript采用的是单线程模型，所有的任务都在一个主线程中完成，一次只能执行一个任务，如果有多个任务需要被执行的话，那么后面的任务会依次排队等着，那么这种情况下，如果我们需要处理大量的计算逻辑的时候，那么就会比较耗时，那么用户界面就很有可能出现假死的状态，或者浏览器被直接卡死，这样非常影响用户体验。这个时候我们的web workers就出现了，来解决这样类似的问题。

我们可以把javascrpt单线程模式理解我们日常生活中的快餐收银员可能会更好的理解，我们平时吃快餐依次排队，然后结账，目前只有一个收银员结账，所有的人都要排队依次来，那假如说某个人拿了很多很多菜，收营员需要慢慢的算账到底要收多少钱，那么这个时候一般会要多点时间，那么其他人就在后面排着队等着，等前面的结账完成后，再依次去结账，这样就会很耗时，那假如现在收银员有2个或更多的地方结账的话，我们就可以到其他人少的地方去结账了，这样就可以使速度更快的去完成某个任务，其实现在我们的 web workers 也是这么一种机制，一些复杂业务逻辑，我们的主线程可以把这些任务交给 web workers子线程去处理，子线程处理完成后，会把结果返回给主线程，然后我们的主线程就执行。

web workers的作用：它使用javascript创建workers线程，我们浏览器主线程可以把一些复杂的业务处理逻辑交给worker线程去运行，在我们的主线程运行的同时，我们的worker线程也在后台运行，两者互补干扰。等到worker线程完成计算任务的时候，会再把结果返回给主线程。这样的优点是：一些复杂的计算逻辑，我们可以把它交给worker线程去完成，主线程就会很流畅，不会被阻塞了。

Worker线程一旦创建成功了，就会始终运行了，不会被主线程的运行打断，虽然这样有利于随时响应主线程的通信，但是这也造成了Worker比较耗费资源，在我们编码过程中，可以适当的使用，并且如果使用完成后，我们应该需要关闭。

Web Worker 使用注意如下常见的几点：

1. 同源限制：分配给 Worker线程运行的脚本文件，必须与主线程的脚本文件同源。2. DOM限制：Worker所在的线程它不能操作window,document这样的对象，也就是说worker线程不能操作dom对象，但是worker线程可以操作业务逻辑，然后把操作后的结果返回给主线程，主线程再去做相关的DOM操作。

2. 文件限制：Worker线程无法读取本地文件，也就是说不能打开本机的文件系统(如：file://) 这样的，它所加载的脚本，必须来自网络。

Web Worker 浏览器支持程度如下所示：

回到顶部

二：web Workers 的基本用法

1. 创建worker线程方法：

我们在主线程js中调用 new 命令，然后实列化 Worker()构造函数，就可以创建一个Worker线程了，如下代码所示：

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

Worker()构造函数的参数是一个脚本文件，该文件就是Worker线程需要执行的任务，由于Worker不能读取本地文件，所以这个脚本必须来自网络。