Web Worker实现前端的“多线程”

Web Workers 是一种 JavaScript 机制，允许在后台运行独立的线程，以执行一些计算密集型或耗时的任务。这使得在多核 CPU 上并行处理任务成为可能。

直接show code：

hello.html代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<p>
    hello world!!!!
p>
<div id="hello">

div>

body>
<script>
    // 获取id为"hello"的div元素
    let helloDiv = document.getElementById("hello");
    let num = 42
    const worker = new Worker('worker.js');

    // 发送消息给 worker（将耗时的工作交给work线程去处理，这样就不会影响页面的渲染）
    worker.postMessage(num);
    //worker进程计算好后发送过来结果
    worker.onmessage = (e) => {
        // 接收来自 worker 的消息
        console.log("接收来自 worker 的消息：",e.data);
        //将结果渲染到页面
        helloDiv.append(e.data)
    }

script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

worker.js代码

// 接收来自主线程的消息
onmessage = (e) => {
    console.log("接收来自主线程的消息：",e.data);
    //处理耗时的计算任务
    let res = fibonacci(e.data)
    res =  res + "-" + (new Date()).getSeconds()
    // 将计算结果发送给主线程
    postMessage(res);
};

function fibonacci(n) {
    if (n <= 1) {
        return n;
    } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

相关阅读:
更好、更快、更强的多任务全景感知YOLOPv2，目标检测、freespace、车道线检测
C++ Qt开发：QNetworkAccessManager网络接口组件
ubuntu20.04 安装TensorRT，解决依赖问题
代码随想录——搜索插入位置
SpringBoot-Web开发-文件上传
简析Cookie、Session、Token
你应该打好你的日志,起码避免被甩锅
计算机竞赛深度学习 opencv python 公式识别(图像识别机器视觉)
解析隐式类型转换操作operator double() const，带你了解隐式转换危害有多大
哪家堡垒机支持国密算法？有哪些功能？

原文地址：https://blog.csdn.net/weixin_38155824/article/details/133378265