作者：建哥2502897913 | 来源：互联网 | 2023-10-12 14:39
最近看了javascript的eventloop相关资料，对eventqueue队列优先级没有理解到位还请各位大神帮我指点一二。第一篇是阮一峰老师的JavaScript运行机制详解：
最近看了Javascript的eventloop相关资料，对event queue队列优先级没有理解到位还请各位大神帮我指点一二。
第一篇是阮一峰老师的Javascript 运行机制详解：再谈Event Loop；这里面有讲到eventloop循环机制，其中有一个event queue队列，里面存放着异步任务的callback；在执行栈执行完成时就会从队列中读取队列任务并执行。这里并没有涉及到优先级，只介绍了event queue是FIFO数据结构。
然后看了第二篇波同学的前端基础进阶（十二）：深入核心，详解事件循环机制
波同学在里面讲到了队列分为宏任务和微任务，而且微任务会在执行栈执行完后立即执行，而宏任务要等到下一次的event loop才会被执行；
这里有一个疑问就是eventloop循环机制中到底是只有一个queue队列还是有宏队列和微队列？因为他们俩讲的不同
不管是微任务队列还是宏任务队列都是遵循FIFO，那队列中的任务被读取到执行栈时也应该是按照这个顺序来执行，那该如何理解队列中任务的优先级？比如dom事件操作，ajax请求的回调、以及setTimeout他们之间是否有优先级？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| console.log('start');
var xhr = new XMLHttpRequest();
var url = 'test.json';
xhr.open('GET', url,true);
xhr.Onreadystatechange= function() {
if (xhr.status == 200 && xhr.readyState == 4) {
console.log(xhr.responseText)
}
}
xhr.send();
setTimeout(function() {
console.log('timeout')
}, 0)
for (var i = 0; i <3000000000; i++) {}
var btn = document.querySelector("#btn");
btn.Onclick= function() {
console.log('click')
}
new Promise((reslove, reject) => {
console.log('promise');
reslove();
}).then((res) => {
console.log('promise finish')
})
console.log('end'); |
输出结果：
1
2
3
4
5
6
7
8
9
| start
promise
end
promise finish
click
{
"test":"aa"
}
timeout |
这里和我预期的有点不一样，我以为应该是ajax的回调先被执行到的，因为我故意停留了2-3秒来点击那个按钮，按理说ajax率先返回了应该被先加入到队列中，结果是click先先输出。。。这里是不是有优先级的存在？
------------------------------------------这是分割线2017-04-07更新---------------------------
经过一番折腾后，查看了很多大佬在这方面的博客文章在这里大概总结一些event loop的认识：
首先要明白的是event loop是由Javascript宿主环境（像浏览器）来实现的，js引擎他不关心也不知道event
loop机制的运行和存在，他只负责从事件队列里面读取事件来执行，他不会也不会知道怎样向事件队列中push事件任务，这些都由宿主来完成。理解这第一点很重要要先知道是谁在做这件事情。
第二点就是一个宿主环境 只能有一个事件循环（Event loop），而一个事件循环可以多个任务队列（Task queue），每个任务都有一个任务源（Task source）。相同任务源的任务，只能放到一个任务队列中。不同任务源的任务，可以放到不同任务队列中。然后js引擎做的事就是不断的去读取这些队列里面的任务来执行，
任务可分为宏任务和微任务；他们的执行过程和顺序上面给的链接的波同学已经讲的很清楚明朗了。我再大概复述一遍：js引擎逐句的执行script整体代码，当遇到异步任务时，js的运行环境就会在适时的时候将这些事件任务push到相应的队列中去，等待着被js引擎去执行，而如果异步没有产生回调（callback）或者说是事件任务，那他就不会push到队列里面去，当js执行栈执行完成后，然后他把微任务队列中的任务读取过，并进行执行，在这执行过程中如果有产生新的异步任务也会按照上述的方式进行处理，当微任务执行完成后他会去读取宏任务队列中的任务并执行，然后周而复始的反复执行，直到把队列中的任务全部执行完。
macro-task(宏任务): script（整体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering；micro-task(微任务): process.nextTick, Promises（这里指浏览器实现的原生 Promise）,Object.observe, MutationObserver
至于队列中的优先级，有一个大概的顺序process.nextTick > promise.then > setTimeout > setImmediate；优先级执行顺序可能还会和具体的宿主环境有关；边城大神也说的对对于异步我们更不应该去依赖他们的执行顺序既然是异步就当作无序的来处理。
参考资料：
1.Promise的队列与setTimeout的队列有何关联？
2.www.w3.org
3.http://stackoverflow.com/ques...
4.https://github.com/youngwind/...
京公网安备 11010802041100号