Web Worker的使用

Web Worker的使用


前言

javascript采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。每个任务将按顺序运行;必须先完成一项任务,然后才能开始下一项任务。

Web Worker的出现,就是给js创建多线程的环境。这样,一些高延时的任务,就可以交给webworker去执行,主线程负责UI交互,这样主线程就不会被阻塞。


一、Web Worker是什么?

Web Worker 是一种在后台运行的 JavaScript 脚本,它可以在独立的线程中执行任务,而不会阻塞主线程的执行。这使得 Web Worker 特别适用于处理一些耗时的计算、数据处理或其他需要长时间运行的任务。

兼容性:ie11测过了,可以支持。

二、使用步骤

2.1 创建 Web Worker

通过创建一个新的 Worker 对象,可以将脚本文件加载到后台线程中运行。

var worker = new Worker('./worker.js');
var worker1 = new Worker('./worker1.js');

2.2 监听消息

Web Worker 可以通过 onmessage 事件监听主线程发送过来的消息。

第一步和这一步都是在html文件中

worker.onmessage = e => {
	console.log(e.data)
}
worker1.onmessage = e => {
	console.log(e.data)
}

2.3 发送消息

Web Worker 可以使用 postMessage 方法向主线程发送消息。

单独创建的一个js文件处理数据

self.postMessage(res)

文件目录

html文件

js文件

看运行结果

可以看出来这个是个异步的,哪个js先执行完,就先打印出来。两个js文件互不影响。

三、优点与缺点

3.1 优点

  • 提高页面性能:Web Worker 可以在后台线程中执行一些计算密集型或者耗时的操作,如数据处理、图像处理等,而不会占用主线程,从而避免了页面卡顿或者卡死的情况,提高了页面的性能和响应速度。

  • 可以处理大规模数据:Web Worker 可以处理大规模的数据,因为它们在单独的线程中运行,不会影响主线程的运行,可以更高效地处理大规模的数据,提高了代码的效率和可扩展性。

  • 可以使代码更加模块化:使用 Web Worker,可以将代码分割成多个模块,分别运行在不同的线程中,从而使得代码更加模块化,可维护性和可读性更强。

  • 支持多线程:Web Worker 支持多线程,因此可以利用多核处理器的优势,提高代码的运行效率。

3.2 缺点

  • 无法直接访问 DOM:由于 Web Worker 运行在独立的线程中,不能直接访问主线程中的 DOM,因此需要使用特殊的方式进行通信,如 postMessage() 方法。

  • 无法访问主线程中的 JavaScript 对象:Web Worker 独立运行在一个线程中,无法直接访问主线程中的 JavaScript 对象,需要使用序列化和反序列化等技术进行数据传递。

  • 无法加载本地文件:Web Worker 只能通过网络加载 JavaScript 文件,无法直接加载本地文件。

  • 无法执行同步操作:Web Worker 无法执行同步操作,如读取文件或等待用户的输入等,因为同步操作会阻塞 Web Worker 的线程。

  • 不支持所有浏览器:Web Worker 不是所有浏览器都支持,尤其是一些旧版的浏览器可能不支持 Web Worker。

四、Vue中使用Web Worker

1. 我的是vue-cli3,在vue.config.js中配置

chainWebpack: (config) => {
    config.module.rule('worker-loader')
       .test(/\.worker\.js$/)
       .use({
           loader: 'worker-loader',
           options: {
               inline: true,
           },
       })
       .loader('worker-loader')
       .end()
}

2.创建worker.js文件

在src文件下创建worker文件夹,里面创建worker.js文件

worker.js文件内容

let date = []

addEventListener('message', function () {
    fib()
}, false)

function fib() {
    setInterval(() => {
        var res = Math.random() * 10
        date.push(res.toFixed(3))
        self.postMessage(date)
    }, 1000)
}

3.在vue中使用worker.js文件

<script>
import Worker from 'worker-loader!@/workers/worker'
export default {
	mounted() {
       let worker = new Worker()
       worker.postMessage(10)
       worker.onmessage = (event) => {
           console.log('res', event.data) 
       }
   },
}
</script>

最后看控制台


转载请说明出处内容投诉
CSS教程_站长资源网 » Web Worker的使用

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买