首页 > 编程语言 >JavaScript 如何在后台工作:了解其单线程性质和异步操作

JavaScript 如何在后台工作:了解其单线程性质和异步操作

时间:2024-09-20 20:34:38浏览次数:9  
标签:异步 javascript 单线程 JavaScript 调用 promise 堆栈

javascript 是网络的支柱,为数十亿网站和应用程序提供动态客户端功能。但您有没有想过 javascript 是如何在后台发挥其魔力的?在这篇文章中,我们将深入研究 javascript 单线程本质的内部工作原理,并探索异步编程的概念。 单线程是什么意思?当我们说 javascript 是“单线程”时,这意味着它有一个调用堆栈。调用堆栈本质上是 javascript 跟踪正在执行的函数的结构。它遵循后进先出 (lifo) 顺序,这意味着最后推送到堆栈的函数将最先完成。以下是其工作原理的示例:function first() { console.log('first function');}function second() { console.log('second function');}first();second();登录后复制在此示例中,first() 函数被添加到堆栈并执行。一旦完成,它就会被弹出,第二个()函数被压入堆栈并接下来执行。虽然单线程语言可能看起来很有限,因为它们一次只能做一件事,但 javascript 巧妙地使用异步机制使其能够模拟多任务处理。 事件循环和异步执行javascript 使用异步执行来处理可能需要很长时间才能完成的操作,例如网络请求、文件 i/o 或计时器。尽管是单线程的,但由于事件循环和回调队列,它可以同时管理多个任务。立即学习“Java免费学习笔记(深入)”; 事件循环事件循环是 javascript 并发模型的核心概念。它的主要职责是管理 javascript 如何处理异步代码执行。其工作原理如下:同步代码首先运行。当 javascript 启动时,它使用调用堆栈以同步方式逐行执行全局范围内的所有代码。异步任务被发送到 web api(如 settimeout、fetch 等)或 node.js api,它们将在后台进行处理。 回调队列是异步操作完成后放置的地方。 事件循环不断检查调用堆栈是否为空。如果堆栈为空,它将从回调队列中取出第一项并将其推送到调用堆栈上,以允许其执行。异步 javascript 的魔力在于事件循环、调用堆栈和回调队列之间的交互。异步操作不会阻塞调用堆栈,这意味着 javascript 可以在等待后台任务完成的同时继续执行其他代码。 示例:使用 settimeout考虑以下带有 settimeout 函数的示例:console.log('start');settimeout(() => { console.log('this runs after 2 seconds');}, 2000);console.log('end');登录后复制以下是逐步发生的事情:javascript 打印“开始”。settimeout 函数被调用,但不是阻塞执行 2 秒,而是发送到 web api,在后台运行。javascript 打印“end”,继续执行而不等待 settimeout 完成。2秒后,settimeout内部的回调函数被放入回调队列中。事件循环检查调用堆栈是否为空(确实如此),然后将回调函数推入堆栈并执行它,打印“this running after 2秒”。 promise 和异步/等待现代 javascript 中处理异步任务的另一种流行方法是通过 promises 和 async/await 语法,这有助于通过避免深层嵌套的回调(也称为“回调地狱”)来提高代码的可读性。promise 表示异步操作的最终完成(或失败)及其结果值。这是一个例子:const promise = new promise((resolve, reject) => { settimeout(() => { resolve('promise resolved!'); }, 1000);});promise.then(result => { console.log(result); // output after 1 second: 'promise resolved!'});登录后复制我们可以使用 then() 来处理 promise 解决时发生的情况,而不是依赖回调。如果我们想以更同步的方式处理异步代码,我们可以使用 async/await:async function asyncExample() { const result = await promise; console.log(result); // Output after 1 second: 'Promise resolved!'}asyncExample();登录后复制这使得代码更干净、更容易理解,允许我们在移动到下一行代码之前“等待”异步任务完成,即使 javascript 在幕后仍然是非阻塞的。 javascript 异步模型中的关键组件调用堆栈:执行同步代码的地方。web api/node.js api:处理异步任务(如网络请求)的外部环境。回调队列:异步任务结果等待推送到调用栈执行的队列。事件循环:协调调用堆栈和回调队列的系统,确保任务按正确的顺序处理。 结论javascript 的单线程特性乍一看似乎有局限性,但其异步功能使其能够有效地管理多个任务。通过事件循环、回调队列和 promise 等机制,javascript 能够处理复杂的非阻塞操作,同时保持直观、同步的编码风格。 以上就是JavaScript 如何在后台工作:了解其单线程性质和异步操作的详细内容,更多请关注我的其它相关文章!

标签:异步,javascript,单线程,JavaScript,调用,promise,堆栈
From: https://www.cnblogs.com/aow054/p/18423236

相关文章

  • JavaScript 微观性能测试、历史和局限性
    我认为性能优化对许多开发人员感兴趣,因为他们更多地了解完成任务的不同方法。一些内心的声音问道:“哪种方式最好?”虽然“最佳”指标有很多变化,例如douglascrockford的2008年javascript:thegoodparts,但性能是容易获得的,因为我们可以自己测试它。然而,测试和证明性能并不总是......
  • Javascript 中的展开和休息运算符及其示例
    剩余和扩展运算符是javascript中强大的功能,允许您更有效地处理数组、对象和函数参数。它们都使用相同的语法(...),但用途不同。休息操作员(...)剩余运算符用于将所有剩余元素收集到数组中。它通常用在函数参数中来处理可变数量的参数。休息运算符示例:functionsum(......
  • JavaScript 中的异步循环:forof 与 forEach
    javascript的异步功能非常酷?,但是选择正确的循环来处理这些异步任务可能会产生很大的不同。让我们用一点乐趣来分解for...of和foreach之间的区别?1。带有异步函数的for...of循环将for...of循环想象为您超级勤奋的朋友,他耐心地等待您完成一项任务,然后再开始下一项任务。......
  • JavaScript 中的提升
    什么是javascript提升?提升是指javascript中在执行之前进行声明的过程。首先处理变量和函数声明。因此,即使变量在声明之前被引用,也不会导致错误,而是返回undefined。对于函数声明,整个函数被提升,这意味着它可以在代码中定义之前使用。此过程在执行开始之前将声明放入堆栈中。......
  • JavaScript 中的数组分组(4)
    JavaScript中的数组分组(2024)数组分组在JavaScript中并不是什么新鲜事。数组分组是JavaScript中的一项新功能,可帮助开发人员根据特定特征将数组中的元素组织成组。这使得查找和使用数据变得更加容易。现在的问题是它是如何运作的?好吧,在最新和现代的方法出现之前,开发人员将......
  • JavaScript 中的星空可视化
    这是一个简单、直接的可视化实现,让人想起经典的Windows95星空屏幕保护程序。它也是交互式的:您可以触摸屏幕或使用加速计来影响运动的方向。这就是它的工作原理:创建一堆粒子(100),每个粒子处于随机位置。每一帧,将每个粒子进一步远离中心*。粒子距离中心越远,它就会变得越明显。这......
  • JavaScript 中的正则表达式
    没有多少人谈论正则表达式,尽管它们对于文本操作和数据验证非常有用。它们提供了一种强大的方法来搜索、匹配和替换字符串中的模式。在JavaScript中,RegExp是一个可以有效地用来查找和操作这些模式的对象,无论您是在验证电子邮件、格式化电话号码还是解析日志。正则表达式甚至可......
  • JavaScript 中 new Function() 和 new function() 的区别
    javascript确实很灵活,但它也带来了一些混乱。例如,你可以使用多种方式来做同一件事情,比如创建函数、对象等。那么标题中提到的两者有什么区别呢?newfunction是另一种创建函数的方式,其语法:constfunc=newfunction([arg1,arg2,...argn],functionbody);一个简单的例子:constsu......
  • JavaScript 中平滑动画的秘密!
    想要在您的网络应用程序中创建黄油般平滑的动画吗?尝试requestanimationframe——javascript的内置优化动画方法!requestanimationframe不使用settimeout或setinterval(这可能会因帧速率不一致而导致动画卡顿),而是将动画与浏览器的刷新率同步,以获得最佳性能。使用方法如下:letp......
  • JavaScript 中的 SET(初学者教程)
    你好,您是否正在寻找一种存储唯一值、允许插入值、查找值总数和删除值的数据结构?套装是最佳选择。许多编程语言都包含内置的set数据结构,javascript也不例外。让我们更深入地了解集合的工作原理。设置是什么???set是一种数据结构,可让您存储任何类型的唯一值,无论是原始值还是对......