前言
现在在前端开发中，越来越多需要利用到多线程或者多进程进行优化或者处理复杂的业务逻辑，但是JavaScript是单线程的语言，不能充分利用硬件设施的优势。而对于一些CPU密集型的任务，对CPU资源的利用率低下，就会导致浏览器反应缓慢或者网页崩溃。而通过使用vue-worker这个npm包，我们可以将某些任务交给另一个线程来处理，从而提高前端性能。
vue-worker
vue-worker是Vue封装的Web Worker库，它允许在浏览器中使用Web Workers，其本质是将业务脚本从主线程中分离，并将它们移交到子线程（或进程）中。在子线程中运行的操作不会影响UI的响应性能，减少了计算密集型操作，提高了应用程序的响应时间与性能。并且vue-worker的代码极简，符合Vue的开发规范，使用webpack分割打包，性能和兼容都非常优秀。
安装
在项目中使用npm安装vue-worker：
npm install vue-worker
使用
在Vue项目中使用
- 引入vue-worker：
import VueWorker from 'vue-worker';
// 或者
const VueWorker = require('vue-worker').default;- 创建
vue-worker实例：
new VueWorker(scriptPath, options)
scriptPath：String，worker脚本的路径，必选参数；options：Object，worker的状态和初始化配置，可选参数。
例如在main.js中引入并创建一个vue-worker实例：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------------------
--- -----
------- -- -
-- ------------
----- ------ - --- -------------------------
-- ------------
-------------------- ------ ---- --
---------------- - --- -- -
-------------------
-
-
--
如上述代码所示，我们成功地创建了一个VueWorker实例，并在主线程中发送一个消息，在worker线程中进行数学运算并将结果发送回主线程。
在普通网页中使用
在vue-worker的github仓库中的dist文件夹中有一个UMD库，可以在直接在网页中引用：
<script src="https://unpkg.com/vue-worker@next/dist/vue-worker.js"></script>
你也可以自己构建，在仓库根目录下运行：
# 克隆项目到本地 git clone https://github.com/Thunf/vue-worker.git # 切换分支 cd vue-worker # 安装依赖 npm install # 构建UMD库 npm run build:umd
API
VueWorker实例方法
postMessage
向worker线程发送消息，同时在worker线程上触发onmessage事件，可以通过event.data接收和处理该消息。
worker.postMessage(message);
message：要发送给worker线程的数据。
terminate
关闭worker线程。
worker.terminate();
VueWorker设置项
VueWorker有三个可选项，用于设置该实例的状态和初始化配置：
computed:Object，添加一个由状态值驱动的计算属性，目前只支持web环境；worker:BooleanObject，表示是否需要生成并请求worker，如果是false则手动引入；modules:BooleanArray，表示需要在worker中引入的模块文件路径（必须是绝对路径），如果是false，则表示不需要引入任何模块。默认情况下，不会在Web Worker中加载Vue依赖项。可以在modules中包含必要的文件，以便在Worker中正确地使用Vue。
Worker脚本API
在worker的脚本中，你需要用到如下的一些API。
importScripts
在worker脚本中引入其他的js脚本文件。
importScripts(url1, url2, ...);
self
当前worker脚本的全局对象。
onmessage
接收主线程发送的消息，可以通过event.data接收和处理该消息。
worker.onmessage = function (event) {
console.log(event.data)
}postMessage
向主线程发送消息。
self.postMessage(result);
示例
计算质数
不同于单线程的计算方式，在子线程中将任务交由worker进行处理，在主线程中发送任务给worker，在worker中完成耗时的计算，然后将结果返回给主线程，避免了计算导致主线程卡顿的现象。
下面通过一个计算质数的程序来展示vue-worker的用法：
-- -------------------- ---- -------
-- -----------
--- -----
------- -- -
-- ----------
----- ------ - --- -----------------------
-- ---------------------
-------------------- ------- ----- --
-- --------------
---------------- - --- -- -
-------------------
-
-
---- -------------------- ---- -------
-- -------------
-------- ---------- -
--- ---- - - -- - -- ------------- ---- -
-- -- - - --- -- -
------ -----
-
-
------ ----
-
-------------- - -------- --- -
----- - ------ - - ------
----- --- - ------------ ------- ------ - - -- --- -- -- - - --
----- ------ - -------------------
------------------------
-通过运行这段代码可以得出1~10000的质数个数，它避免了计算导致主线程卡顿的现象。效果如下：
总结
本文介绍了如何使用Vue封装的Web Worker库——vue-worker，通过将计算型的任务交给其他线程执行，可以避免主线程任务处理耗时而造成的UI响应卡顿现象，从而提升应用程序的响应性能。使用vue-worker可以更加简洁地书写多线程代码，并遵循了Vue的开发规则，既有性能，也有兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22f3