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>

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

你可能感兴趣的:(前端,javascript,开发语言)