JS多线程的实现，webwork

最新推荐文章于 2025-10-05 23:29:06 发布

原创最新推荐文章于 2025-10-05 23:29:06 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

总结专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨了HTML5提出的WebWorker技术，旨在解决JavaScript单线程执行时的性能瓶颈。WebWorker允许创建独立的工作线程，处理复杂逻辑，避免主线程阻塞，提升用户体验。文章详细介绍了WebWorker的创建、消息传递机制及其应用场景。

JS为了避免DOM渲染冲突，使用单线程运行代码。虽然浏览器通过事件循环队列延后处理耗时任务，但是在执行大量复杂运算时依然会使主线程卡顿，HTML5提出了WebWork允许用户另开线程来进行复杂的逻辑计算处理。
用法：

在index.Html中新建worker对象，并发送及监听消息

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>WebWork</title>
    </head>
    <body> </body>
    <script>
        var work = new Worker('./work.js')
        work.postMessage(1000000000)
        work.onmessage = function(res){
            console.log("累加结果 : ",res.data)
        }
    </script>
    </html>

新建work.js处理复杂逻辑

    onmessage = function(e){

        let sum = 0,num = e.data;
        for(var i=1;i<=num;i++){
            sum += i
        }
        postMessage(sum);
    }

其实和import引入一个JS文件进行处理，然后export的用法有点像，不过这里是指定了postmessage方法和onmessage方法，webwork使用会占一定系统资源，而且work中不能访问及操作dom,。