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

最新推荐文章于 2024-06-22 15:10:18 发布

我是等闲之辈

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量283

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_38155824/article/details/133378265

版权

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

直接show code：

hello.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>

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);
    }
}

我是等闲之辈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Worker实现前端的“多线程”

/ 发送消息给 worker（将耗时的工作交给work线程去处理，这样就不会影响页面的渲染）// 获取id为"hello"的div元素。//worker进程计算好后发送过来结果。// 接收来自 worker 的消息。"接收来自 worker 的消息："//将结果渲染到页面。
复制链接

扫一扫