js的多线程示例

于 2024-07-14 14:30:29 发布
阅读量713 收藏 11
点赞数 11
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25753445/article/details/140416599
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>普通worker</title>
  </head>
  <body>
    <script type="app/worker" id="wrs">
      this.onmessage = function(e){
        console.log(666.331,e.data)

        this.postMessage("副线程发送的数据[副数据]");
      }
    </script>
    <script>
      if (typeof Worker !== undefined) {
        var blob = new Blob([document.querySelector("#wrs").textContent]);
        var url = window.URL.createObjectURL(blob);

        var worker = new Worker(url);

        // 监听副线程返回的消息
        worker.onmessage = (e) => {
          console.log(666.001, e.data);

          // 关闭副线程
          worker.terminate();
        };
        worker.postMessage("主线程发送的数据[主数据]");
      } else {
        console.log(666.002, "不支持Worker");
      }
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异步worker</title>
  </head>
  <body>
    <script>
      var workerVal = {
        fn: (params) => {
          return "test worker===" + JSON.stringify(params);
        },
        params: { a: 1, b: 1 },
      };

      function prWorker(fw) {
        try {
          if (typeof Worker !== undefined) {
            return new Promise((resolve, reject) => {
              const worker = new Worker(
                window.URL.createObjectURL(
                  new Blob([
                    `
                      var wVal=eval(${fw.fn.toString()})(${JSON.stringify(
                      fw.params
                    )})
                      this.postMessage(wVal);
                    `,
                  ])
                )
              );
              worker.onmessage = (e) => {
                const res = { code: 200, data: e.data };
                worker.terminate();
                resolve(res);
              };
            });
          } else {
            return Promise.resolve({ code: 200, data: fw.fn(fw.params) });
          }
        } catch (err) {
          return Promise.resolve({ code: 0, data: "" });
        }
      }
    </script>
    <script>
      prWorker(workerVal).then((res) => {
        console.log(666.998, res);
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>监听worker</title>
  </head>
  <body>
    <script>
      var workerVal = {
        fn: (params, wk, cb) => {
          let i = 0;
          setInterval(() => {
            i++;
            const val = i + " test worker===" + JSON.stringify(params);
            if (cb) {
              cb({ code: 200, data: val });
            } else {
              wk.postMessage(val);
            }
          }, 1000);
        },
        params: { a: 1, b: 1 },
      };

      function wkWorker(fw, cb) {
        try {
          if (typeof Worker !== undefined) {
            const worker = new Worker(
              window.URL.createObjectURL(
                new Blob([
                  `
                  var wVal=eval(${fw.fn.toString()})(${JSON.stringify(
                    fw.params
                  )},this,'')
                    `,
                ])
              )
            );
            worker.onmessage = (e) => {
              cb({ code: 200, data: e.data });
            };
          } else {
            fw.fn(fw.params, "", cb);
          }
        } catch (err) {}
      }
    </script>
    <script>
      wkWorker(workerVal, (res) => {
        console.log(666.998, res);
      });
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test worker</title>
  </head>
  <body>
    <script>
      if (typeof Worker !== undefined) {
        // 开启副线程
        var worker = new Worker("./js.js");

        // 发送消息给副线程
        worker.postMessage("发消息到js");

        // 监听副线程返回的消息
        worker.onmessage = (e) => {
          console.log(666.001, e.data);

          // 关闭副线程
          worker.terminate();
        };
      } else {
        console.log(666.002, "不支持Worker");
      }
    </script>
  </body>
</html>


self.onmessage = function (e) {
  //监听主线程发过来的消息
  console.log(666.111, e.data);

  // 将信息发送到主线程上
  self.postMessage("发一条消息到html");
};
阿赛工作室
关注
js 多线程
小花的前端博客
09-22 1979
什么是多线程? 多线程(multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的的计算机因有硬件支持的能力而能够在同一时间执行多于一个线程的,进而提升整体处理性能.具有这种能力的系统包括对称多处理机,多核心处理器以及芯片级多处理或同时多线程处理器.在一个程序中,这些独立运行的程序片段叫作线程(Thread),利用它编程的概念就叫做”多线程处理”
玩转JavaScript多线程
最新发布
weixin_46529755的博客
07-25 1184
本文介绍了JavaScript中的多线程。包括Web Worker，Shared Worker，Service Worker使用的应用以及示例的展示。分析了现阶段多线程的优势以及注意的事项。
js javascript 实现多线程
weixin_30247781的博客
10-16 794
在讲之前，大家都知道js是基于单线程的，而这个线程就是浏览器的js引擎。 首先来看一下大家用的浏览器都具有那些线程吧。 假如我们要执行一些耗时的操作，比如加载一张很大的图片，我们可能需要一个进度条来让用户进行等待，在等待的过程中，整个js线程会被阻塞，后面的代码不能正常运行，这可能大大的降低用户体验，这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的，而...
简单实现一个 js 多线程
热门推荐
陈浩然哦 的博客
04-13 1万+
简单实现一个 js 的多线程执行和多线程之间数据的传递 JS作为脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。（这里这些问题我们不做研究） 但是单线程的语言，有一个很致命的确定。如果说一个脚本语言在执行时，其中某一块的功能在执行时耗费了大量的时间，那么就会造成阻塞。这样的项目，用户体验是非常差的，所以这种现象在项目的开发过程中是不允许存...
JavaScript多线程初步学习
weixin_30909575的博客
07-31 1423
一、多线程理解 　　首先，我们要理解什么是多线程，百度百科上说：多线程（英语：multithreading），是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。具有这种能力的系统包括对称多处理机、多核心处理器以及芯片级多处理（Chip-level multithreading）或同时多线程...
js多线程的实现
u010227042的博客
07-21 416
我们都知道JS是一种单线程语言，即使是一些异步的事件也是在JS的主线程上运行的（具体是怎么运行的，可以看我另一篇博客JS代码运行机制）。像setTimeout、ajax的异步请求，或者是dom元素的一些事件，都是在JS主线程执行的，这些操作并没有在浏览器中开辟新的线程去执行，而是当这些异步操作被操作时或者是被触发时才进入事件队列，然后在JS主线程中开始运行。 首先说一下浏览器的线程，浏览器中主要的线程包括，UI渲染线程，JS主线程，GUI事件触发线程，http请求线程。 JS作为脚本语言，它的主要用途是
JavaScript多线程详解
12-02
JavaScript通过事件循环（Event Loop）和异步编程模型来实现多任务处理，尽管它本身不支持真正的多线程。 在JavaScript中，所有代码都是在JavaScript引擎线程中执行的，这个线程负责解释和执行代码。由于JavaScript...
JS模拟多线程
10-31
### JS模拟多线程知识点详解 #### 一、引言 JavaScript 作为一种单线程语言，在处理复杂的异步任务时存在一定的局限性。为了解决这一问题，开发者常常需要通过模拟的方式来实现类似多线程的功能。本文将详细介绍一...
JavaScript多线程运行库Nexus.js详解
10-18
在探讨JavaScript多线程运行库Nexus.js之前，首先需要了解JavaScript的传统单线程执行模型。在传统的JavaScript运行环境中，主线程以同步的方式处理任务队列中的任务，包括调用setTimeout或setImmediate，或创建...
AutoJs源码-例子-多线程使用
11-15
AutoJs源码-例子_多线程使用。本资源购买前提醒：本源码都是实际autojs项目模板，安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担...
Concurrent.Thread.js javascript多线程
11-21
Concurrent.Thread.js 一个用来让javascript也进行多线程开发的包，感兴趣的快来下吧。
Node.js 多线程完全指南总结
10-17
为了解决这个问题，Node.js引入了多线程特性，通过`worker_threads`模块实现。 首先，理解Node.js的工作原理至关重要。Node.js的核心机制是事件循环和工作池。事件循环是一个处理回调函数的机制，它在主线程上运行...
Js多线程？
u010852160的博客
07-13 550
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 [javascript] view plain copy print? setTimeout( function(){ alert(’你好!’); } , 0);   setInt
JS多线程
顺其自然~专栏
07-06 4659
JS是多线程的吗？ 多线程编程相信大家都很熟悉，比如在界面开发中，如果一个事件的响应需要较长时间，那么一般做法就是把事件处理程序写在另外一个线程中，在处理过程中，在界面上面显示类似进度条的元素。这样界面就不会卡住，并且能够显示任务执行进度。记得刚开始做前端的时候，老板交代在界面上面做一个定时器，每秒更新用户的在线时间。当时拥有Java和C++开发经验的我自信满满的说我加一个线程就可以分分钟搞定了。所以查阅文档，发现setTimeout和setInterval可以很方便的实现该功能。那时候我就认为这就是JS
js如何实现多线程
wf280496的博客
03-18 2588
允许我们在后台运行一个脚本，而不影响页面的性能和用户界面。这个脚本运行在与主线程不同的线程中，可以执行一些计算密集型的操作。在主线程和工作线程之间通信可以通过消息传递来完成。此外，由于工作线程与主线程之间的通信是通过消息传递实现的，因此在传递大量数据时可能会出现性能问题。是一种单线程语言，它的执行模型决定了同一时间只能有一个任务执行。向主线程发送了一个包含结果的消息。在上面的示例中，我们创建了一个工作线程，通过。的帮助下，我们可以在浏览器中实现多线程。事件来接收从工作线程返回的消息。
JavaScript多线程编程
duan18888的博客
04-29 3943
浏览器端JavaScript是以单线程的方式执行的，也就是说JavaScript和UI渲染占用同一个主线程，那就意味着，如果JavaScript进行高负载的数据处理，UI渲染就很有可能被阻断，浏览器就会出现卡顿，降低了用户体验。 为此，JavaScript提供了异步操作，比如定时器(setTimeout、setInterval)事件、Ajax请求、I/O回调等。我们可以把高负载的任务使用异步处理，它们将会被放入浏览器的事件任务队列（event loop）中去，等到JavaScript运行时执行线程空闲时候
js的多线程处理
qq_41947500的博客
11-18 621
1. 主线程中使用worker进行多线程 var worker = new Worker(js文件路径); ps:js文件路径同jsp中路径类似。 2. 其它线程中使用(需要单独写入一个js)： var i = 0; function func(){ //把i发送到浏览器的js引擎线程里（主线程中） postMessage(i); } mainFunc() 3.在主线程中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿赛工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值