js的宏任务与微任务

在事件循环中,微任务比宏任务具有更高的优先级,因此微任务会先于宏任务执行。

具体来说,当一个宏任务执行完毕后,会立即检查微任务队列中是否有待执行的微任务。如果有,则按照先进先出的顺序依次执行所有的微任务,直到微任务队列为空。然后才会执行下一个宏任务。

这意味着,即使有多个宏任务在排队等待执行,在执行下一个宏任务之前,都会先执行完所有的微任务。

举个例子来说,假设有以下代码:

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
});

console.log('4');

执行顺序是:

  1. 执行同步代码,输出1;
  2. 遇到setTimeout,将其回调函数放入宏任务队列;
  3. 遇到Promise,将其回调函数放入微任务队列;
  4. 输出4;
  5. 当前宏任务执行完毕,执行微任务队列中的所有微任务,输出3;
  6. 执行浏览器UI线程的渲染工作;
  7. 检查是否有Web Worker任务,如果有则执行;
  8. 执行下一个宏任务,取出setTimeout的回调函数,输出2。

因此,在这个例子中,微任务先于宏任务执行,输出顺序是1、4、3、2。

=========================================================================

在JavaScript中,常见的宏任务包括:
                整体的script代码:
当浏览器解析HTML页面时,会先加载并执行整体的script代码。整体的script代码执行完毕后,才会继续执行其他的宏任务和微任务。
                setTimeout和setInterval回调函数
                DOM事件处理函数:
DOM事件处理函数是指在DOM元素上注册的事件回调函数,比如点击事件、鼠标移动事件、键盘事件等。当用户与页面进行交互时,浏览器会触发相应的事件,并执行对应的事件处理函数。这些事件处理函数属于宏任务,会在它们所属的事件循环迭代中执行。
                XMLHttpRequest回调函数:

        XMLHttpRequest回调函数指的是通过XMLHttpRequest对象发送请求后,服务器响应返回时所触发的回调函数。

        XMLHttpRequest是用于在浏览器中发送HTTP请求的对象,可以用于异步加载数据或与服务器进行交互。当发送请求时,可以为XMLHttpRequest对象指定一个回调函数,用于处理服务器返回的响应数据。

        以下是一个使用XMLHttpRequest发送异步请求的示例:

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

        而常见的微任务包括:
                Promise回调函数(.then.catch都是微任务)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值