异步任务之任务队列与事件循环探秘

在 JavaScript 中,处理异步任务的机制主要通过任务队列(Task Queue)和事件循环(Event Loop)来实现。这一机制是理解 JavaScript 异步模型的基础,对于编写高效和反应灵敏的应用程序至关重要。下面将详细介绍任务队列和事件循环的运行原理及其相互作用。

1. 事件循环(Event Loop)
事件循环是一个控制机制,它负责监控执行栈(Call Stack)和任务队列之间的工作。JavaScript 是单线程的,这意味着它每次只能执行一个任务。事件循环的核心工作就是确保异步任务可以在合适的时机执行。

简单来说,事件循环的基本流程是:https://www.nowcoder.com/issue/tutorial?zhuanlanId=j572L2&uuid=d5653a45948844c781778deb4ab3a374

执行栈:首先检查执行栈(Call Stack),如果栈为空,事件循环会查看任务队列。
任务队列:如果任务队列中有任务,事件循环会将最先进入队列的任务出队,并把它推入执行栈;然后执行这个任务。
重复:重复这个过程,直到任务队列为空,执行栈中没有任务为止。
2. 任务队列(Task Queue)
任务队列是等待执行的任务集合。根据不同类型的异步任务,JavaScript 中有几种任务队列:

2.1 宏任务(Macro Task)
宏任务队列通常包含像 setTimeout、setInterval、I/O 操作等任务。在事件循环的每个循环中,首先会从宏任务队列中取一个任务来执行。

2.2 微任务(Micro Task)
微任务队列通常包含 Promise 的回调和 process.nextTick(Node.js 环境)。微任务的优先级高于宏任务。在执行完一个宏任务后,事件循环会查看微任务队列,执行所有的微任务,然后再返回宏任务队列。

3. 事件循环与任务队列的执行流程
以下是事件循环和任务队列的详细执行流程:https://www.nowcoder.com/issue/tutorial?zhuanlanId=j572L2&uuid=d5653a45948844c781778deb4ab3a374#牛客AI配图神器#

开始:JavaScript 引擎启动并完成同步代码的执行。
宏任务开始执行: 取出一个宏任务(例如 setTimeout 的回调)并执行。
微任务检查: 当宏任务执行完成后,检查微任务队列并执行所有微任务,直到微任务队列为空。
重复:继续这个过程,当宏任务和微任务都为空时,等待新任务。
全部评论

相关推荐

发一下之前秋招的面经叭原型链● 用function实现class  ○ 构造函数或类用prototype,实例用.__proto__● 实现extends  ○ Object.assign 会改变原对象  ○ // 设置子类的原型为父类的原型Dog.prototype = Object.create(Animal.prototype);● bind 和apply● 浏览器跨域● 那些文件或资源会受跨域限制,什么类型的网络请求不受同源策略管控  ○ js、css、img,iframe等,有src,不受跨域影响,常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外  ○ img标签在特定情况下存在跨域问题。 当通过‌JavaScript动态创建的img元素设置了crossOrigin属性为anonymous或use-credentials时,如果图片来自其他域且没有设置适当的CORS策略,浏览器会拒绝访问该图片,导致跨域问题。‌  ○ 跨域问题的原因在于,浏览器默认会对通过img标签加载的图片进行缓存。当通过JavaScript动态创建的img元素访问相同的图片时,浏览器会直接从缓存中获取图片,而不是重新发起请求。然而,如果JavaScript中的img元素设置了crossOrigin属性,浏览器会尝试以CORS的方式请求图片,但缓存中的图片并不包含CORS信息,因此被浏览器拒绝。  ○ 需要注意的是,通过img标签直接加载的图片资源(如通过src属性指定)通常不会遇到跨域问题,因为浏览器默认允许这种加载方式● 前端正向代理和反向代理  ○ 都是正向代理  ○ 正向代理:代理的是客户端,隐藏客户端,反向代理:代理的是服务器,隐藏服务器● vue的双向绑定● vue的依赖收集● react、 性能优化● 技术栈是react● 常用框架原理,浏览器原理 缓存,跨域,加载,同源策略,http https混合应用跨域
查看13道真题和解析
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务