0d9fa625e9e73a8aabf12905b4cfba74.png

Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!


2013年7月28日,尤雨溪第一次在 GItHub 上为 Vue.js 提交代码;2015年10月26日,Vue.js 1.0.0版本发布;2016年10月1日,Vue.js 2.0发布。

最早的 Vue.js 只做视图层,没有路由, 没有状态管理,也没有官方的构建工具,只有一个库,放到网页里就可以直接用了。

后来,Vue.js 慢慢开始加入了一些官方的辅助工具,比如路由(Router)、状态管理方案(Vuex)和构建工具(Vue-cli)等。此时,Vue.js 的定位是:The Progressive Framework。翻译成中文,就是渐进式框架。

Vue.js2.0 引入了很多特性,比如虚拟 DOM,支持 JSX 和 TypeScript,支持流式服务端渲染,提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能,现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧!


什么是webworker

众所周知,JavaScript是一个单线程的,也就是说,所有的任务都在一个线程上去执行,只能等着前面的任务执行完毕,才可以执行后面的任务。当我们面对大数据量计算的场景下,我们的页面就会出现一个假死的现象,用户什么都做不了,只能傻傻的等待。我们呢,就等待着测试小姐姐给我们提一个bug。。。

webworker就是来解决这个东西的,先说一句,webworker不是什么第三方的东西,它是JavaScript原生支持的。webworker为JavaScript创建多线程环境,允许主线程创建worker子线程,当然,可以创建多个。我们可以将一些任务,分配给子线程去做。在主线程运行的同时,子线程在后台也同时运行,互不干扰。等子线程做完了,就把结果返回给主线程。

这样的好处就是我们可以把那些计算量大、耗时长的任务,分配给worker线程去做,主线程就会很流畅,不会被阻塞或者拖慢。

但是,worker线程一旦创建成功,就会一直执行,不会被主线程上的活动打断。举个例子,当主线程有一个弹窗alert,那么会阻塞主线程,但是不会对子线程有任何影响。这也就说明了,worker是比较消耗资源的,不应该过度使用,而且当使用完毕了,就要给关闭。


原生webworker如何使用

废话不多说,直接上代码,在上代码之前,我们先设定一个场景:

你有一个十万级的简单累加运算,页面中有一个input输入框,进入页面的时候,计算开始,我们去观察input输入框能否同步输入。

不使用webworker

代码目录结构如下:

b5be53a97064fa851696d25162c4c6c7.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test_webworker</title>
  </head>
  <body>
    <input type="text" />
    <script src="./index.js"></script>
  </body>
</html>
// index.js  ---主线程


let sum = 0;
for (let i = 0; i < 200; i++) {
    for (let i = 0; i < 10000; i++) {
        sum += Math.random()
    }
}

页面运行后效果:直接假死现象,因为后台正在计算,input框都没有渲染出来

b9172a75d50147291731ca32d3cb97cc.png

使用webworker子线程

现在我们使用webworker,将这200万次累加计算,给worker子线程去做。

代码目录如下:

1a268cb67455499784fbae44be4c53d5.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test_webworker</title>
  </head>
  <body>
    <input type="text" />
    <script src="./index.js"></script>
  </body>
</html>
// index.js  ---主线程


// 创建一个子线程
const worker = new Worker('worker.js')
// 接收子线程发来的消息
worker.onmessage = e => {
    console.log('主线程接收到:', e.data)
    worker.terminate();
}


// 向子线程发消息
worker.postMessage('子线程,你真帅!')
// worker.js ---子线程


// 接收主线程发来的消息
onmessage = e => {
  console.log('子线程接收到:', e.data)
}


let sum = 0;
for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
        sum += Math.random()
    }
}


// 向主线程发送消息
postMessage(sum)

页面运行如下:

22c8aba27c6f45bb546a66e58be1589c.png

在子线程运行的过程中,主线程中的input输入框是可以同时输入内容的,并没有因为计算而阻塞UI渲染。当worker运行完毕,就把sum传递给主线程,这样就解决了。


Vite 中使用webworker

在 Vite 中,不用这么复杂,我们只需要通过模块的方法,导入一个模块的 js,然后在后面冠以一个 ?worker,就会返回一个 MyWorker 或者是任何的 worker 对象,然后我们再去实例化这个 Worker,就会返回这个 worker 对象了。也就是说,我们可以把这个 worker 的 js,当成是一个模块来使用。

听起来好像很是一回事,其实很简单,通俗的两句话解决:

// 原生的:
const worker = new Worker('./worker.js)
worker.onmessage = function(ev){}


// Vite中的:用原生的,可以
const worker = new Worker('./worker.js)
worker.onmessage = function(ev){}


// Vite中的:用模块导入形式的,也可以
import MyWorker from './worker?worker'
const worker = new MyWorker()
worker.onmessage = function(ev){}

加上 ?worker 有啥用?加上后,就会把当前模块当成webworker来使用了,就可以通过 new 来创建 webworker 了。


Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!

b6d20184a9b0743e506946b136880747.png

叶阳辉

HFun 前端攻城狮

往期精彩:

Logo

前往低代码交流专区

更多推荐