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();

结果如下