javascript之事件循环event loop
为什么要引入事件循环(event loop)
- JavaScript,它是一种单线程语言,所有任务都在一个线程上完成,一旦遇到大量任务或者遇到一个耗时的任务,网页就会出现"假死",因为JavaScript停不下来,也就无法响应用户的行为。
- 你也许会问,JavaScript为什么是单线程,难道不能实现为多线程吗?
- 这跟历史有关系。JavaScript从诞生起就是单线程。原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。后来就约定俗成,JavaScript为一种单线程语言。(Worker API可以实现多线程,但是JavaScript本身始终是单线程的。)
所以要引入事件循环机制,解决一些耗时的操作(例如I/O请求)引起的主线程效率底下的问题。
什么是事件循环呢?
“Event Loop是一个程序结构,用于等待和发送消息和事件。(a programming construct that waits for and dispatches events or messages in a program.)”
简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。
- 宏任务主要包含:script( 整体代码)、setTimeout、setInterval、I/O、UI
交互事件、setImmediate(Node.js 环境)
微任务主要包含:Promise、MutaionObserver、process.nextTick(Node.js 环境) - 首先是同步代码运行,碰到setTimeout之类的宏任务就先放到宏任务的队列里面,碰到promise.then()之类的微任务就放到微任务的队列里面,然后同步代码运行完毕后,开始释放微任务队列,根据微任务先进先出的原则,把最近放在其队列的微任务依次拿出来运行,完了之后,接着再开始释放宏任务队列,根据宏任务先进后出的原则,把最先放在其队列的宏任务依次拿出来运行,完了以后全部结束。
例子1.
console.log('script start');
setTimeout(function () {
console.log('setTimeout');
}, 0);
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log('promise1');
}).then(function () {
console.log('promise2');
});
console.log('script end');
执行结果
例子2.
var p = new Promise(resolve=>{
console.log(4);
resolve(5);
});
function fun1(){
console.log(1);
}
function fun2(){
setTimeout(() => {
console.log(2);
}, 0);
fun1();
console.log(3);
p.then(resolved => {
console.log(resolved);
})
.then(()=>{
console.log(6);
});
}
fun2();
结果如下