javascript多线程--web workers实现线程间数据交互的小测试

最新推荐文章于 2023-04-12 07:25:03 发布

MCcDullPig

最新推荐文章于 2023-04-12 07:25:03 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： javascript 多线程 web workers

本文链接：https://blog.youkuaiyun.com/McDullBro/article/details/51383945

本文介绍了JavaScript中的Web Workers技术，用于实现后台运行的线程，避免影响页面性能。通过一个反面教材展示了未经优化的耗时运算，然后提供了一个简单的Web Workers实例，演示了如何在JS线程和worker线程之间进行数据交互，worker线程专门处理耗时运算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

实现一个非常简单的web workers例子：

一.先来看一个反面教材：

模拟一个耗时运算用传统方式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea id="textareaId"></textarea>
</body>
<script>
     var num = 5000000000,
         r = 0,
         i=num;
     for (;i;i--) {
        r += i;
     }
     //直接处理耗时操作，结果浏览器直接卡爆，等了一分钟都没反应。
    document.getElementById("textareaId").innerHTML= r;
</script>
</html>

由此可见这样的方式处理耗时操作要不得。

二.web workers小实例：

web workers的方法还有很多，但是我这里就只实现最简单的功能，两个线程之间数据的交互，一个线程我把它称为JS线程，一个为worker线程，其中worker线程是处理耗时运算的。