JS的执行机制

javaScript的执行机制

JS是单线程

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

同步任务和异步任务

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

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

1. 同步任务：同步任务会进入主线程中排队，只有前一个任务执行完毕，才能执行后一个任务。

2. 异步任务：进入Task Queue“任务队列”，当主线程中的任务运行完了，才会从Task Queue“任务队列”取出异步任务放入主线程执行。

3. 如下图所示

宏任务和微任务

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

示例

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