JavaScript运行机制

川长思鸟来 2023-07-20 12:27 21阅读 0赞

### **一，JavaScript几个概念** ###

**JS是单线程：**主要用途是与用户互动，以及操作DOM，避免了同时操作同一个DOM的矛盾问题；

**Web Worker多线程**：实现的“多线程”实际上指的是“多子线程”，完全受控于主线程，且不允许操作DOM；

**事件循环：**js引擎存在monitoring process（监控）进程，会持续不断的检查**主线程执行栈**是否为空，一旦为空，就会去Event Queue（**事件队列**）那里检查是否有等待被调用的函数。这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

**同步任务：**同步任务(synchronous)指主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

**异步任务：**异步任务(asynchronous)指的是不进入主线程、而进入**任务队列**（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

**宏任务和微任务：**异步任务分为微任务和宏任务，promise.then、promise.catch、promise.nextTick(node)属于微任务，整体代码script、setTimeOut、setInterval属于宏任务，**微任务优先于宏任务执行；**

**执行栈： **所有**同步任务**都在主线程上执行，形成一个执行栈（execution context stack）；

**js常见异步操作：**setTimeOut，setInterval，ajax，promise（**new Promise是会进入到主线程中立刻执行，而promise.then和promise.catch则属于微任务**），I/O；

### **二，JS执行流程：** ###

![format_png][]

1.  整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；
2.  同步任务会直接进入主线程依次执行；
3.  异步任务会再分为宏任务和微任务；
4.  宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
5.  微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
6.  当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；
7.  上述过程会不断重复，这就是Event Loop事件循环；

### **三，举例说明** ###

**1，例**

console.log(1)
    
    setTimeout(function(){
      console.log(2)
    },0)
    
    console.log(3)

分析：  
1.console.log(1)是同步任务，直接打印1；  
2.setTimeout是异步任务，且是宏函数，放到宏函数队列中，等待下次Event Loop才会执行；  
3.console.log(3)是同步任务，直接打印3；  
4.主线程执行完毕，没有微任务，那么执行第二个宏任务setTimeout，打印2；  
5.结果：1，3，2

**2，例**

setTimeout(function(){
        console.log(1)
    });
    
    new Promise(function(resolve){
        console.log(2);
        for(var i = 0; i < 10000; i++){
            i == 9999 && resolve();
        }
    }).then(function(){
        console.log(3)
    });
    
    console.log(4);

分析：  
1.setTimeout是异步，且是宏函数，放到宏函数队列中；  
2.new Promise是同步任务，直接执行，打印2，并执行for循环；  
3.promise.then是微任务，放到微任务队列中；  
4.console.log(4)同步任务，直接执行，打印4；  
5.此时主线程任务执行完毕，检查微任务队列中，有promise.then，执行微任务，打印3；  
6.微任务执行完毕，第一次循环结束；从宏任务队列中取出第一个宏任务到主线程执行，打印1；  
7.结果：2，4，3，1

**3，例**

console.log(1);
    
    setTimeout(function() {
      console.log(2);
    }, 0);
    
    Promise.resolve().then(function() {
      console.log(3);
    }).then(function() {
      console.log('4.我是新增的微任务');
    });
    
    console.log(5);

分析：  
1.console.log(1)是同步任务，直接执行，打印1；  
2.setTimeout是异步，且是宏函数，放到宏函数队列中；  
3.Promise.resolve().then是微任务，放到微任务队列中；  
4.console.log(5)是同步任务，直接执行，打印5；  
5.此时主线程任务执行完毕，检查微任务队列中，有Promise.resolve().then，执行微任务，打印3；  
6.此时发现第二个.then任务，属于微任务，添加到微任务队列，并执行，打印4.我是新增的微任务；  
7.这里强调一下，微任务执行过程中，发现新的微任务，会把这个新的微任务添加到队列中，微任务队列依次执行完毕后，才会执行下一个循环；  
8.微任务执行完毕，第一次循环结束；取出宏任务队列中的第一个宏任务setTimeout到主线程执行，打印2；  
9.结果：1，5，3，4.我是新增的微任务，2

**4，例**

分析：  
1.add()是同步任务，直接执行，打印1；  
2.add()里面的setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；  
3.add()下面的setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；  
4.new Promise是同步任务，直接执行，打印4；  
5.Promise里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；  
6.Promise里面的for循环，同步任务，执行代码；  
7.Promise.then是微任务，放到微任务队列；  
8.console.log(8)是同步任务，直接执行，打印8；  
9.此时主线程任务执行完毕，检查微任务队列中，有Promise.then，执行微任务，发现有setTimeout是异步任务且宏函数，记做timer4放到宏函数队列；  
10.微任务队列中的console.log(7)是同步任务，直接执行，打印7；  
11.微任务执行完毕，第一次循环结束；  
12.检查宏任务Event Table，里面有timer1、timer2、timer3、timer4，四个定时器宏任务，按照定时器延迟时间得到可以执行的顺序，即Event Queue：timer2、timer4、timer3、timer1，取出排在第一个的timer2；  
13.取出timer2执行，console.log(3)同步任务，直接执行，打印3；  
14.没有微任务，第二次Event Loop结束；  
15.取出timer4执行，console.log(6)同步任务，直接执行，打印6；  
16.没有微任务，第三次Event Loop结束；  
17.取出timer3执行，console.log(5)同步任务，直接执行，打印5；  
18.没有微任务，第四次Event Loop结束；  
19.取出timer1执行，console.log(2)同步任务，直接执行，打印2；  
20.没有微任务，也没有宏任务，第五次Event Loop结束；  
21.结果：1，4，8，7，3，6，5，2

**5，例**

setTimeout(function() { // timer1
      console.log(1);
      setTimeout(function() {  // timer3
        console.log(2);
      })
    }, 0);
    setTimeout(function() {  // timer2
      console.log(3);
    }, 0);

分析：  
1.第一个setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；  
2.第三个setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；  
3.没有微任务，第一次Event Loop结束；  
4.取出timer1，console.log(1)同步任务，直接执行，打印1；  
5.timer1里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；  
6.没有微任务，第二次Event Loop结束；  
7.取出timer2，console.log(3)同步任务，直接执行，打印3；  
8.没有微任务，第三次Event Loop结束；  
9.取出timer3，console.log(2)同步任务，直接执行，打印2；  
10.没有微任务，也没有宏任务，第四次Event Loop结束；  
11.结果：1，3，2

### **五，参考文章** ###

作者：StarryLake  
链接：https://www.jianshu.com/p/e06e86ef2595

[format_png]: /images/20230528/d66e206fac8e4d988d786a20deb7961a.png