JavaScript如何解决单线程缺陷——webWorker

这篇具有很好参考价值的文章主要介绍了JavaScript如何解决单线程缺陷——webWorker。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决JavaScript单线程问题——webWorkers

参考文档 使用 Web Workers - Web API 接口参考 | MDN (mozilla.org)

MDN的介绍为:

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,它们可以使用 XMLHttpRequest(尽管 responseXMLchannel 属性总是为空)或 fetch(没有这些限制)执行 I/O。一旦创建,一个 worker 可以将消息发送到创建它的 JavaScript 代码,通过将消息发布到该代码指定的事件处理器(反之亦然)。

简单来说就是, 我们可以通过使用worker为主线程分担数据处理压力.
假如说你有一段很大的数据需要处理, 而你又不想这段程序阻碍你的其他操作,这时候就可以考虑一下webWorker.

如何使用webWorker

创建worker

  1. 先创建一个worker.js文件, 该文件为线程代码文件, 文件中的代码会在后台线程中运行.

  2. 在主线程中创建一个worker, 通过类似通讯的方式在主线程和worker中进行数据传递.

    // index.js主线程代码块
    // 简单创建一个worker名为myworker
    let myworker = new Worker("./firstworker.js") // 参数为firstworker.js文件的路径
    

主线程和worker之间进行通讯

  1. 主线程发送数据给worker: 在主线程中通过 worker.prototype.postMessage() 进行通信

    // index.js主线程代码块
    // ... 创建完worker
    
    console.log("主线程我说句话先,接下来你要替我干活了.");
    // 简单向worker中发送一个数组[1, 2, 3]
    myworker.postMessage([1, 2, 3]);
    
  2. worker接收来自主线程的数据: 在myworker.js中接收数据

    // firstworker.js代码块
    // 接收来自主线程的数据,数组[1, 2, 3]
    onmessage = function recive(msg) {
        // 接收到的是一个MessageEvent对象, 我们可以获取data属性
        console.log(msg.data); // 输出[1, 2, 3]
    };
    

    我们也可以使用更简洁的方式

    // firstworker.js代码块
    // 使用解构和匿名箭头函数
    onmessage = ({ data }) => {
      console.log(data); // 输出[1, 2, 3]
    };
    
  3. worker发送数据给主线程: 通过 postMessage() 发送数据给主线程 index.js

    接收到数组[1, 2, 3]之后, 我们可以简单的对数组进行一个逆序操作, 再把结果返回主线程

    // firstworker.js代码块
    onmessage = ({ data }) => {
        // 主线程发来的数据
        console.log("主线程发来的数据:", data);
        // 赋值一个新变量newdata
        let newdata = data;
        // 对新变量操作(数组逆序)
        newdata.sort((a, b) => {
            return b - a;
        });
        console.log("worker后台线程处理完成的数据newdata:", newdata);
        // 处理完的结果递交给主线程
        postMessage(newdata);
    };
    
  4. 主线程接收worker讯息: 通过 addEventListener() 对worker的动作进行监听

    // index.js主线程代码块
    // 主线程通过 监听 实例的message事件获取worker的数据
    // 接收myworker处理之后的结果
    myworker.addEventListener("message", ({ data }) => {
        console.log("接收到来自worker处理完的数据:", data);
    });
    

关闭线程

worker.terminate()可以帮助我们在主线程中随意关闭线程, 即为从主线程中立刻终止一个运行中的 worker

// index.js主线程代码块
// 3s后关闭线程
setTimeout(() => {
    console.log("关闭myworker,你别说话了")
    myWorker.terminate();
}, 3000);

// firstworker.js代码块
setTimeout(() => {
    console.log("4秒时让我说句话")
}, 4000);

worker监听

主线程通过 addEventListener() 对worker动作进行监听, 动作包含三种文章来源地址https://www.toymoban.com/news/detail-475829.html

  • message
  • error
  • messageError:

注意事项

  1. worker是HTML5规范的API,所以你没法在node环境中使用.
  2. worker没办法对dom元素操作, 只能在主线程中, 多线程操作dom感觉就不大好.
  3. worker可以用于执行长时间运行的计算、处理大量数据、执行网络请求等任务,而不会影响用户界面的响应性能.帮助开发人员提高Web应用程序的性能和响应性能.
  4. 本文章只对worker的使用进行了简单介绍, 具体进阶用法等详细内容还得参考MDN文档(共享worker, 线程安全, 嵌入式worker等)

到了这里,关于JavaScript如何解决单线程缺陷——webWorker的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (学习笔记-进程管理)多线程冲突如何解决

    对于共享资源,如果没有上锁,在多线程的环境里,很有可能发生翻车。 在单核 CPU 系统里,为了实现多个程序同时运行的假象,操作系统通常以时间片调度的方式,让每个进程每次执行一个时间片,时间片用完了,就切换下一个进程运行,由于这个时间片的时间很短,于是

    2024年02月13日
    浏览(105)
  • 机器学习如何改变缺陷检测的格局?

    机器学习在缺陷检测中扮演着重要的角色,它能够通过自动学习和识别各种缺陷的模式和特征,改变缺陷检测的格局。以下是机器学习在缺陷检测中的一些应用和优势: 自动化检测:机器学习技术可以自动化处理大量的数据,通过学习和识别缺陷的模式和特征,实现自动化检

    2024年02月02日
    浏览(37)
  • 解决C语言的缺陷【C++】

    在C/C++中,变量、函数和后面要学到的类都是大量存在的,这些变量、函数和类的名称将都存在于全局作用域中,可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突或名字污染,namespace的出现就是 防止与全局作用域冲突 编译后后

    2024年02月02日
    浏览(25)
  • AWS WAF实战、优势对比和缺陷解决

    笔者为了解决公司Web站点防御性问题,较为深入的研究AWS WAF的相关规则。面对上千万的冲突,笔者不得设计出一种能漂亮处理冲突数据WAF规则。 AWS WAF开发人员在线指南 笔者意图引进WAF,但运维同学折腾了几个月都没有开启WAF成功,面临有以下挑战和目标: 解决大量与现有

    2024年02月12日
    浏览(43)
  • 面试官问我:线程锁导致的kafka客户端超时,如何解决?

    本文分享自华为云社区《线程锁导致的kafka客户端超时问题》,作者: 张俭 。 有一个环境的kafka client发送数据有部分超时,拓扑图也非常简单 我们先对客户端的环境及JVM情况进行了排查,从JVM所在的虚拟机到kafka server的网络正常,垃圾回收(GC)时间也在预期范围内,没有

    2024年02月03日
    浏览(45)
  • 解决单链表的缺陷:C 语言版实现

    本文介绍了单链表的概念、结构、分类以及 C 语言中的实现。单链表是一种非连续、非顺序的存储结构,通过指针链接实现数据元素的逻辑顺序。

    2024年02月04日
    浏览(39)
  • FreeRTOS ~(五)队列的常规使用 ~ (1/5)队列解决同步缺陷

    前情提要 FreeRTOS ~(四)同步互斥与通信 ~ (1/3)同步的缺陷 举例子说明:利用队列解决前述的\\\"同步的缺陷\\\"问题

    2024年02月12日
    浏览(42)
  • FreeRTOS ~(五)队列的常规使用 ~ (2/5)队列解决互斥缺陷

    前情提要 FreeRTOS ~(四)同步互斥与通信 ~ (2/3)互斥的缺陷 举例子说明:利用队列解决前述的\\\"互斥的缺陷\\\"问题 FreeRTOS ~(五)队列的常规使用 ~ (1/5)解决同步缺陷

    2024年02月12日
    浏览(40)
  • [微服务 ]微服务集成中的3个常见缺陷,以及如何避免它们

      微服务风靡一时。他们有一个有趣的价值主张,即在与多个软件开发团队共同开发的同时,将软件快速推向市场。因此,微服务是在扩展您的开发力量的同时保持高敏捷性和快速的开发速度。 简而言之,您将系统分解为微服务。分解并不是什么新鲜事,但是通过微服务,您

    2024年02月03日
    浏览(45)
  • FreeRTOS如何解决访问冲突/线程不安全(临界段、互斥锁、挂起调度、看门人任务)

    在多任务(多线程)系统中,存在一个隐患,那就是多线程的访问(在FreeRTOS中就是任务)。当一个任务A开始访问一个资源(外设、一块内存等),但是A还没有完成访问,B任务运行了,也开始访问,这就会造成数据破坏、错误等问题。 例如: 两个任务试图写入一个液晶显示

    2024年02月07日
    浏览(135)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包