javaScript的执行机制

JS是单线程

单线程：所有的任务执行时需要排队，前一个任务结束，才会执行后一个任务。
缺点：如果前一个任务耗时很长，后一个任务就会一直等待执行。会导致JS 执行的时间过长，造成页面的渲染不连贯，加载阻塞的感觉。

同步任务和异步任务

同步任务：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步任务：若前一个任务执行需要很长时间，则在进行当前任务的同时去执行其他任务。

在JS中的同步任务和异步任务

同步任务：同步任务会进入主线程中排队，只有前一个任务执行完毕，才能执行后一个任务。
异步任务：进入Task Queue“任务队列”，当主线程中的任务运行完了，才会从Task Queue“任务队列”取出异步任务放入主线程执行。
如下图所示

宏任务和微任务

异步任务分为宏任务和微任务
宏任务包括：
1. 定时器（setTimeout、setInterval）
2. 事件绑定
3. ajax异步请求
4. 回调函数
5. node中fs可以进行异步的I/O操作
微任务包括
1. Promise
2. process.nextTick（node中实现的api）
宏任务和微任务的执行顺序：先执行微任务再执行宏任务

示例

console.log('1');

// 宏任务，有多个定时器（宏任务），时间少的会优先放到主线程里去执行
setTimeout(function () {
  console.log('2');
  // 微任务
  process.nextTick(function () {
    console.log('3');
  })
  // new Promise是创建一个构造函数，这个过程是同步的，而.then方法是异步（微任务）的
  new Promise(function (resolve) {
    console.log('4');
    resolve();
  }).then(function () {
    console.log('5')
  })
})

// 微任务
process.nextTick(function () {
  console.log('6');
})

// new Promise是创建一个构造函数，这个过程是同步的，而.then方法是异步（微任务）的
new Promise(function (resolve) {
  console.log('7');
  resolve();
}).then(function () {
  console.log('8')
})

// 宏任务，有多个定时器（宏任务），时间少的会优先放到主线程里去执行
setTimeout(function () {
  console.log('13');
}, 1000)

// 宏任务，有多个定时器（宏任务），时间少的会优先放到主线程里去执行
setTimeout(function () {
  console.log('9');
  // 微任务
  process.nextTick(function () {
    console.log('10');
  })
  // new Promise是创建一个构造函数，这个过程是同步的，而.then方法是异步（微任务）的
  new Promise(function (resolve) {
    console.log('11');
    resolve();
  }).then(function () {
    console.log('12')
  })
}, 200)

输出结果: 1 7 6 8 2 4 3 5 9 11 10 12 13