Web Workers的概念以及应用场景

猪油仔丶

于 2023-09-01 15:34:45 发布

阅读量223

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_53718249/article/details/132624695

版权

JavaScript 是单线程的语言，但是浏览器提供了一种方式让我们可以用多线程来执行代码，这就是 web worker。

概念：

web worker是浏览器内置的api，用于在单独的线程中执行javascript代码，线程之间通过message通信，从而避免ui主线程阻塞，影响页面响应速度。

缺点：web worker线程不能访问window等全局属性，所以不能访问一些浏览器内置的api，也不能修改Dom,但可以通过xmlHttprequest或者fetch发送网络请求.

使用：

要定义web worker可以直接新建一个普通的js文件，实例化 Worker 对象并传入要执行的 JavaScript 文件名就可以创建一个新的 Web Workers

let worker = new Worker('stufftodo.js');

在里面监听onmessages事件，通过事件参数的data属性访问传递进来的消息，然后使用post的message回传消息给主线程

onmessage = function(e) {
    let data = e.data
     
    postMessage(
        data.sort((a,b)=>a-b)
)
    // 对数据进行处理
}

应用场景：

主要用于提高外部应用程序的性能和响应速度。

和service worker的区别：

service worker可以在离线的情况下运行

关注