首页 > 其他分享> 文章详细

浏览器的事件循环

2022-07-17 17:44:29 阅读：171 来源： 互联网

标签：异步 console log 队列任务循环事件浏览器 setTimeout

JavaScript的任务分为同步和异步，同步任务是直接放在主线程队列执行，而异步任务是放在任务队列中，若多个异步任务则需要在任务中排队等待（类似于缓冲区）。

单线程：一个任务完成后才能执行下一个任务。

主线程用于浏览器处理用户事件和页面绘制。

调用栈就是函数执行的地方，有主线程在运行js代码中形成的，函数执行后，它会从栈中被移除。

检查调用栈是否为空以及讲某个任务添加到调用栈中的个过程就是事件循环。

浏览器端事件循环中的异步队列有两种：宏任务队列(macrotask)和微任务队列(microtask)。其目的为了异步队列任务，划分优先级。

宏任务：ajax、setTimeout、setinterval、DOM监听、UI Rendering

微任务：Promise的then回调、Mutation Observe API、queueMicrotask

同步代码：

console.log(1);
console.log(2);
console.log(3);

异步代码：

　　计时器，ajax，读取文件等

setTimeout(()=>{
    console.log(1);
},1000)
setTimeout(()=>{
    console.log(2);
},100)
setTimeout(()=>{
    console.log(3);
},10)

当同时存在同步与异步代码情况下，会优先执行同步代码

for(let i=0;i<1000;i++){//同步代码
    console.log(1);
}
setTimeout(()=>{//异步代码
    console.log(2);
},0);
setTimeout(()=>{
    console.log(2);
},0);
console.log(5);//同步代码

//先打印1000个1，后打印5，最后再打印2

标签：异步,console,log,队列,任务,循环,事件,浏览器,setTimeout
来源： https://www.cnblogs.com/Hollow-Z/p/16475882.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浏览器的事件循环