npm 包 vue-worker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 vue-worker 使用教程

前言

现在在前端开发中，越来越多需要利用到多线程或者多进程进行优化或者处理复杂的业务逻辑，但是JavaScript是单线程的语言，不能充分利用硬件设施的优势。而对于一些CPU密集型的任务，对CPU资源的利用率低下，就会导致浏览器反应缓慢或者网页崩溃。而通过使用vue-worker这个npm包，我们可以将某些任务交给另一个线程来处理，从而提高前端性能。

vue-worker

vue-worker是Vue封装的Web Worker库，它允许在浏览器中使用Web Workers，其本质是将业务脚本从主线程中分离，并将它们移交到子线程（或进程）中。在子线程中运行的操作不会影响UI的响应性能，减少了计算密集型操作，提高了应用程序的响应时间与性能。并且vue-worker的代码极简，符合Vue的开发规范，使用webpack分割打包，性能和兼容都非常优秀。

安装

在项目中使用npm安装vue-worker：

--- ------- ----------

使用

在Vue项目中使用

引入vue-worker：

------ --------- ---- -------------
-- --
----- --------- - ------------------------------

创建vue-worker实例：

--- --------------------- --------

scriptPath： String，worker脚本的路径，必选参数；
options： Object，worker的状态和初始化配置，可选参数。

例如在main.js中引入并创建一个vue-worker实例：

------ --- ---- -----
------ --------- ---- ------------

------------------

--- -----
  ------- -- -
    -- ------------
    ----- ------ - --- -------------------------

    -- ------------
    -------------------- ------ ---- --
    ---------------- - --- -- -
      -------------------
    -
  -
--

如上述代码所示，我们成功地创建了一个VueWorker实例，并在主线程中发送一个消息，在worker线程中进行数学运算并将结果发送回主线程。

在普通网页中使用

在vue-worker的github仓库中的dist文件夹中有一个UMD库，可以在直接在网页中引用：

------- --------------------------------------------------------------------

你也可以自己构建，在仓库根目录下运行：

- -------
--- ----- ---------------------------------------
- ----
-- ----------
- ----
--- -------
- ------
--- --- ---------

API

VueWorker实例方法

postMessage

向worker线程发送消息，同时在worker线程上触发onmessage事件，可以通过event.data接收和处理该消息。

----------------------------

message：要发送给worker线程的数据。

terminate

关闭worker线程。

-------------------

VueWorker设置项

VueWorker有三个可选项，用于设置该实例的状态和初始化配置：

computed: Object，添加一个由状态值驱动的计算属性，目前只支持web环境；
worker: Boolean Object，表示是否需要生成并请求worker，如果是false则手动引入；
modules: Boolean Array，表示需要在worker中引入的模块文件路径（必须是绝对路径），如果是false，则表示不需要引入任何模块。默认情况下，不会在Web Worker中加载Vue依赖项。可以在modules中包含必要的文件，以便在Worker中正确地使用Vue。

Worker脚本API

在worker的脚本中，你需要用到如下的一些API。

importScripts

在worker脚本中引入其他的js脚本文件。

------------------- ----- -----

self

当前worker脚本的全局对象。

onmessage

接收主线程发送的消息，可以通过event.data接收和处理该消息。

---------------- - -------- ------- -
  -----------------------
-

postMessage

向主线程发送消息。

-------------------------

示例

计算质数

不同于单线程的计算方式，在子线程中将任务交由worker进行处理，在主线程中发送任务给worker，在worker中完成耗时的计算，然后将结果返回给主线程，避免了计算导致主线程卡顿的现象。

下面通过一个计算质数的程序来展示vue-worker的用法：

-- -----------
--- -----
  ------- -- -
    -- ----------
    ----- ------ - --- -----------------------

    -- ---------------------
    -------------------- ------- ----- --
    -- --------------
    ---------------- - --- -- -
      -------------------
    -
  -
--

-- -------------
-------- ---------- -
  --- ---- - - -- - -- ------------- ---- -
    -- -- - - --- -- -
      ------ -----
    -
  -
  ------ ----
-

-------------- - -------- --- -
  ----- - ------ - - ------
  ----- --- - ------------ ------- ------ - - -- --- -- -- - - --
  ----- ------ - -------------------
  ------------------------
-

通过运行这段代码可以得出1~10000的质数个数，它避免了计算导致主线程卡顿的现象。效果如下：

总结

本文介绍了如何使用Vue封装的Web Worker库——vue-worker，通过将计算型的任务交给其他线程执行，可以避免主线程任务处理耗时而造成的UI响应卡顿现象，从而提升应用程序的响应性能。使用vue-worker可以更加简洁地书写多线程代码，并遵循了Vue的开发规则，既有性能，也有兼容性。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005663781e8991b448e22f3