JS的事件循环机制-event-loop

JS运行机制

1、谈谈JS的运行机制

• JS是单线程的，因为js离不开用户的操作，和用途有关

• 例如：操作页面上的dom元素，假设js是多线程，一个线程是删除dom，一个线程是增加dom，这样就不知道该以哪个线程为主了

2、JS语言的特点？

• 单线程、解释性语言

event-loop

• 事件循环机制 由三部分组成：调用栈、微任务队列（微队列）、消息队列（宏队列）

• event-loop开始的时候，会从全局一行一行地执行，会压入到调用栈中，被压入的函数被称之为帧，当函数返回后会从调用栈弹出

  • function func1(){
            
            
        console.log(1);
    }
    function func2(){
            
            
        console.log(2);
        func1();
        console.log(3);
    }
    func2();
    
    //2 1 3
    

  • 先执行func2(),func2()被放入调用栈中，直接打印输出2，调用func1()，func1()被放入调用栈中，打印输出1，func1()执行完毕，从调用栈中弹出，接着打印输出3，fun2()执行完毕，从调用栈中弹出

• js中的异步操作，比如fetch、setTimeout、setInterval压入到调用栈中的时候里面的消息会进去到消息队列中去，消息队列中会等到调用栈清空之后再执行

  • function fun1(){
            
            
        console.log(1);
    }
    function fun2(){
            
            
        setTimeout(()=>{
            
            
            console.log(2);
        });
        fun1();
        console.log(3);
    }
    fun2();
    
    //1 3 2
    

  • 执行fun2(),将fun2()放入调用栈中，遇到定时器，将console.log(2)放入消息队列中，执行fun1()，输出1，fun1()执行完毕，从调用栈弹出，直接输出3，fun2()执行完毕，将fun2()从调用栈弹出，最后执行消息队列中的console.log(2)，输出2

• promise、async、await的异步操作的会加入到微任务中去，会在调用栈清空的时候立即执行，调用栈中加入的微任务会立马执行

  • var p=new Promise((resolve,reject)=>{
            
            
        console.log(4);
        resolve(5);
    })
    function f1(){
            
            
        console.log(1);
    }
    function f2(){
            
            
        setTimeout(()=>{
            
            
            console.log(2);
        });
        f1();
        console.log(3);
        p.then(value=>{
            
            
            console.log(value);
        })
    }
    f2();
    
    //4 1 3 5 2
    

  • 定义p,将new promise的操作放入调用栈中，立即执行，输出4，将resolve(5)放入微任务队列，定义p的操作执行完毕，从调用栈弹出。执行f2(),将f2()压入调用栈，一来就遇到定时器，将console.log(2)压入消息队列，执行f1()，将f1()压入调用栈，输出1，f1()执行完毕，将f1()从调用栈里弹出，输出3，执行then()，输出5，resolve(5)弹出微任务队列，执行消息队列里的console.log(2),将其从消息队列里弹出