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

相关阅读:
Java网络编程——NIO处理写事件(SelectionKey.OP_WRITE)
常见自动化测试工具及框架的选用
条件随机场（CRF）极简原理与超详细代码解析
认识Spring
解密Kubernetes（K8s）集群的创建过程和关键步骤
基于PHP语言的会员系统搭建（Docker版）
MyBatis实现多表映射、分页显示、逆向工程
另一种降维算法：UMAP（主要是和t-SNE进行对比）
[全网唯一]通过修改源码使得从ZIP提取文件并在提取时进行重命名保存(博客园同步发布)
【数据挖掘】实验8：分类与预测建模

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