美文网首页web前端技术分享
js执行机制,同步-异步,宏任务-微任务

js执行机制,同步-异步,宏任务-微任务

作者: 一刀一个小黄鱼 | 来源:发表于2019-04-15 11:06 被阅读0次

同步和异步任务

由于JavaScript是一门单线程语言,是这门语言的核心特征。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。为了解决这个问题,设计者把执行的任务分成两种:同步任务、异步任务

1.png
  • 同步和异步任务进入到执行栈中,分别进入不同的执行场所,同步的进入主线程执行,异步的进入Event Table并注册函数
  • 当指定的事情完成时,Event Table会将这个函数移入Event Queue
  • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
  • 上述过程会不断重复,也就是常说的Event Loop(事件循环)。
// 首先打印1
console.log(1); 

// 进入到Event Table,注册了回调函数打印2开始执行,2s后进入到Event Queue;
setTimeout(() => { 
  console.log(2);
},2000)

// 也进入到Event Table,请求成功后执行函数进入到Event Queue
$.ajax({
    url:www.javascript.com,
    data:data,
    success:() => {
      console.log('3');
    }
})

// 继续执行主线程中的任务,打印3,执行完所有的主线程任务后,在去Event Queue的任务
console.log(4);

// 1 4 2 3 也可能是1 4 3 2 (根据ajax请求的时间是否快于setTimeout)

宏任务与微任务

除了广义的同步任务和异步任务,我们对任务有更精细的定义

  • macro-task(宏任务):

    优先级:主代码块 > setImmediate > MessageChannel > setTimeout / setInterval

  • micro-task(微任务):

    process.nextTick > Promise > MutationObserver

不同类型的任务会进入对应的事件队列中,比如setTimeoutsetInterval会进入相同的事件队列。

事件循环的顺序,决定js代码的执行顺序。进入整体代码(宏任务)后,开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。

2.png
console.log(1);

setTimeout(() => {
  console.log(2);
},100)

new Promise(resolve => {
  console.log(3);
  resolve()
}).then(res => {
  console.log(5);
})

console.log(6);

// 1 3 6 5 2
  • 进入到整体代码(宏任务),执行主线程打印出 1

  • 遇到setTimeout,将其回调函数注册后,放入异步队列,回调函数分到到宏任务

  • 执行Promisenew Promise立即执行,打印3

  • then函数分发到微任务

  • 执行打印6

  • 整体代码script宏任务执行结束,检查到有执行的的微任务,打印5

  • 第一次event loop完成,执行第2轮的宏任务,打印2

总结

一个js的执行顺序,可以理解为先分为同步和异步,再划分为宏任务还是微任务。但这2者是没有关系的

setTimeout(() => {
  // 宏任务
  new Promise(resolve => {
    console.log('1');
    resolve();
  }).then(() => {
    // 微任务
    console.log('2');
  });
    
  // 宏任务
  console.log('3');
  
  // 宏任务
  setTimeout(() => {
    process.nextTick(function() {
      console.log('4');
    })
    
    console.log('5');
  }, 1000)
}, 1000);

//1s后执行顺序为1 3 2 5 4
  • 立即执行new Promise代码 1then的处理放入微任务
  • 执行宏任务 打印 3
  • 执行宏任务开启setTimeout,执行时往异步队列注册一个1s中后执行的函数(可以看上面的异步任务处理流程)
  • 宏任务执行完成后,执行微任务打印2
  • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,放入主线程执行
  • 在开始新一轮的执行先宏任务也就是打印5
  • 再执行微任务process.nextTick打印4

参考来之于这篇文章

相关文章

  • js事件循环机制

    js事件循环机制 一、 执行栈 二、 任务队列(同步任务和异步任务) 三、 宏任务和微任务 四、 浏览器下的事件循...

  • js 异步执行顺序

    js的执行顺序,先同步后异步异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask...

  • js执行机制,同步-异步,宏任务-微任务

    同步和异步任务 由于JavaScript是一门单线程语言,是这门语言的核心特征。单线程就意味着,所有任务需要排队,...

  • 头条面试题:js同步异步代码执行顺序测试

    异步笔试题,请写出下面代码的运行结果: 这道题考的知识点: js事件循环机制 同步异步执行顺序 微任务宏任务 as...

  • 中高级前端面试题

    事件循环机制 同步:执行栈 异步:任务队列 1.宏任务 点击回调 settimeout 2.微任务 当前task执...

  • 异步操作

    同步任务/异步任务,微任务/宏任务ajaxPromisegeneratorawait/async js是单线程的,...

  • JavaScript事件循环机制

    JavaScript单线程执行 同步栈执行完成后,再执行异步队列 异步队列中分为宏任务和微任务 微任务比宏任务优先...

  • 夯基础- js event loop机制

    js运行机制 event loop事件循环 js分为同步任务和异步任务,所有的同步任务都在主线程上执行 另外存在着...

  • 一个栗子彻底搞定JS运行机制(Event Loop)

    JS运行机制 整体的script(作为第一个宏任务)开始执行的时候,会把所有代码分为两部分:“同步任务”、“异步任...

  • 运行机制,宏任务 与 微任务

    运行机制: JS 的本质是单线程执行 事件队列:同步任务,异步任务() 运行机制 1,JS 的本质是单线程执行 单...

网友评论

    本文标题:js执行机制,同步-异步,宏任务-微任务

    本文链接:https://www.haomeiwen.com/subject/ozzewqtx.html