js运行机制

在日常面试求职中，不免会做几道面试题，这面试题中往往会遇到js执行输出顺序，而这运行机制是我们每个前端人员不得不掌握的最基本的原理

• 一开始我们总以为javascript 语句是按照出现顺序执行的，因为JavaScript是单线程语言

     let a = '1';
     console.log(a);
     let b = '2';
     console.log(b);</pre>

• 但事实却是这样的

  console.log("start");
  var promise = new Promise((resolve) => {
      console.log("promise start..");
      resolve("promise");
   });
   promise.then((val) => console.log(val));
   setTimeout(()=>{console.log("setTime1")},0);
   console.log("test end...")

• 按照我们一开始的理解，再去浏览器验证一下，是不是很懵逼？？？说好的自上而下一行一行执行呢？

接下来就让咱们说一下这js运行机制吧！！！

EventLoop事件循环

• js事件循环将任务分为‘ ’同步任务 ‘ ’和‘ ’ 异步任务‘ ’:

  • 同步任务进去主线程，异步任务进入EventTable且注册函数，指定任务完成时，将注册函数放入EventQueue中

  • 主线程内的任务执行完毕，会去EventQueue中读取对应的函数，进入主线程执行

  此过程不断重复，及Event Loop(事件循环)

• 来张图，根据上述说明捋一下吧

image

再来个例子吧

    let data = [];
         $.ajax({
              url:url
              data:data,
              success:() => {
                  console.log('发送成功!');
              }
         })
     console.log('代码执行结束');</pre>

代码运行：ajax为异步进入EventTable，注册回调函数success，同时主线程的console.log(’代码执行结束‘)执行。ajax事件指定注册success任务完成，回调函数进入Event Queue,读取回调函数success并且执行

setTimeout

众所周知，这是个延时的异步方法，延时指定时间后执行回调，但是渐渐的用的地方多了，问题就出现了，延时时间比自己指定时间更长>

• 我们来看一个例子

 setTimeout(() => {
   console.log(1)
},3000)
sleep(10000000)

去浏览器执行操作，却发先‘1’输出等待时间远超过3s,说好的3s呢？……是因为主线程任务没有执行完，主线程执行完后才能让console.log(1)再进入主线程进行执行

setInterval

与setTimeout差不多，只不过这个是循环执行，是每搁一段儿指定之间执行一次，每搁指定时间将注册函数放入Event Queue，如果前面执行时间太久，也同样会等待比指定时间更长的时间

宏任务(macro-task)和微任务(micro-task)

将同、异步分的更加精确些又分为：

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

• micro-task(微任务)：Promise，process.nextTick

js代码执行顺序：

进入整体到吗宏任务后，开始第一次循环。接着执行所有的微任务，然后再次宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

接下来咱们用一段代码解释上述说明

setTimeout(function() {
  console.log('setTimeout');
 })
 
 new Promise(function(resolve) {
  console.log('promise');
 }).then(function() {
  console.log('then');
 })
 
 console.log('console');

• 这段代码作为宏任务，进入主线程。

• 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)

• 接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。

• 遇到console.log()，立即执行。

• 好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。

• ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。

• 结束。

那么咱们再来看一张图：事件循环，微任务，宏任务的关系图：

image

js执行原理到这里就讲述完了，然后给大家留一道题，大家自行测试一下吧

console.log('1');
setTimeout(function () {
    console.log('2');
    process.nextTick(function () {
        console.log('3');
    })
    new Promise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5')
    })
})
process.nextTick(function () {
    console.log('6');
})
new Promise(function (resolve) {
    console.log('7');
    resolve();
}).then(function () {
    console.log('8')
})
setTimeout(function () {
    console.log('9');
    process.nextTick(function () {
        console.log('10');
    })
    new Promise(function (resolve) {
        console.log('11');
        resolve();
    }).then(function () {
        console.log('12')
    })
})
// 答案
//- 整体代码作为一个宏任务进入，开始第一个循环
//- 执行同步  //1
//- stime1 放入宏任务队列任务
//- process.nextTick ，process1进入微任务队列，
//- new promise 立即执行 //7
//- then1放入微任务队列
//- stime2 放入入宏任务队列
//- 完成第一个宏任务（整体代码script）
//- 执行微任务process1 then1 //6  8
//- 结束第一次循环，开始第二次循环，执行宏任务stime1，//2
//- process2放入微队列中
//- new promise //4
//- 添加微任务then2
//- 执行微任务process2  then2 结束第二次循环  // 3  5
//- 执行宏任务stime2  // 9
//- 新增微任务process3
//- new promise  //11
//- 添加微任务then3
//- 执行process3 then3  结束第三次循环 // 10  12
//- 所以输出结果1 7 6 8 2 4  3 5 9 11 10 12