javascript 说一下事件循环机制(node、浏览器)

一、为什么会有Event Loop
JavaScript 的任务分为两种同步和异步,它们的处理方式也各自不同,同步任务是直接放在主线程上排队依次执行,异步任务会入任务队列中,若有多个异步任务则需要在任务队列中排队等待,任务队列类似于缓冲区,任务下一步会被移到调用栈然后主线程执行调用栈的任务。
调用栈:调用栈是一个栈结构,函数调用会形成一个栈帧,帧中包含了当前执行函数的参数和局部变量等上下文信息,函数执行完后,它的执行上下文会从栈中弹出。
Javascript 是单线程的,单线程是指js引擎中解析和执行js代码的线程只有一个(主线程),每次只能做一件事情,然而ajax请求中,主线程在等待响应的过程中回去做其他事情,浏览器先在事件表注册ajax的回调函数,响应回来后回调函数被添加到任务队列中等待执行,不会造成线程阻塞,所以说js处理ajax请求的方式是异步的。
综上所述,检查调用栈是否为空以及讲某个任务添加到调用栈中的过程就是event loop,这就是javascript实现异步的核心。
二、浏览器中的Event Loop
2.1 Micro-Task与Macro-Task
浏览器端事件循环中的异步队列有两种:macro(宏任务)队列和micro(微任务)队列。
常见的宏任务:setTimeout、setInterval、script(整体代码)、I/O操作、UI渲染等。
常见微任务:new Promise().then(回调)、MutationObserve等。
2.2 requestAnimationFrame
requestAnimationFrame也属于异步执行的方法,但该方法既不属于宏任务,也不属于微任务。按照mdn中定义:window.requestAnimationFrame()告诉浏览器-你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前 执行
requestAnimationFrame是GUI渲染之前执行,但在微任务之后,不过requestAnimationFrame不一定会在当前帧必须执行,由浏览器根据当前的策略自行决定在哪一帧执行。
在这里插入图片描述

  1. 检查宏任务队列是否为空,非空则到2,为空则到3
  2. 执行宏任务中的一个任务
  3. 继续检查微任务队列是否为空,若有则到4,否则到5
  4. 取出微任务中的任务执行,执行完成返回到步骤3
  5. 执行视图更新
    当某个宏任务执行完后,会查看是否有微任务队列。如果有,先执行微任务队列中的所有任务,如果没有,会读取宏任务队列中排的最前的任务,执行宏任务的过程中,遇到微任务,依次加入微任务队列。栈空后,再次读取微任务队列里的任务,依次类推。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值