js 多线程Worker

揭小宏

已于 2022-04-16 11:17:27 修改

阅读量4.1k

点赞数 3

分类专栏：前端文章标签：前端

于 2022-04-16 10:46:28 首次发布

本文链接：https://blog.youkuaiyun.com/jiehong1020/article/details/124209693

版权

前端专栏收录该内容

24 篇文章

订阅专栏

任务执行优先级，微任务（Promise）>宏任务（定时器）>线程任务（Worker）

多线程处理多个任务，这里假设5个任务循环了80亿，如果按之前js单线程执行是不是5*80亿，想必处理速度相当慢，开启多线程执行分开执行

新建一个测试的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小小菜鸟</title>
</head>
<button onclick="click_w()">点击</button>
<body>

<script>
    //假设这里有五个任务 每一个任务要执行2千次数
    let list=["第一个任务","第二个任务","第三个任务","第四个任务","第五个任务"];
    //记录线程回来的数据
    let rw_is=[];
    function click_w(){
        console.log("点击开始执行函数",new Date().getSeconds());
        for (let item in list){
            //执行第一个任务
            let worker1 = new Worker('demo_workers.js');
            //循环执行添加子任务
            worker1.postMessage(list[item]);
            worker1.onmessage = function (e) {
                rw_is.push(e.data);
                worker1.terminate(); // 终止通信
            };
        }
        //添加监听线程处理结果
        let set_t=setInterval(()=>{
            if(rw_is.length>=5){
                console.log("执行结果",rw_is);
                console.log("执行这个后的秒数",new Date().getSeconds());
                //如果线程结果一致清掉定时器
                clearInterval(set_t);
            }
            console.log("定时器监听")
        },100);

    }
</script>

</body>
</html>

** new Worker(‘demo_workers.js’) Worker对象传入的是文件路径，这里新建一个demo_workers.js**

// importScripts('script.js'); // 用于加载其他 script 脚本

// 等同于 this.addEventListener / addEventListener
this.addEventListener('message', function (e) {
    let cuont=0;
    for (let i = 0; i <8000000000; i++) {
        cuont=cuont+1;
    }
    this.postMessage(e.data+'执行完毕'+cuont+"次数");
    this.close();
}, false)
// 监听错误
this.addEventListener('error', function (e) {
    console.error(e);
}, false);
// this.close(); // 终止通信