JS执行顺序

众所周知,JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程,称之为main thread-主线程)

1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行
2.Javascript 任务分为2类,同步任务异步任务(异步又分为宏任务微任务),同步和异步任务都是队列,所以是先进先出的。
3.执行顺序同步—>异步—>MicroTask(微任务)—>MacroTask(宏任务)(异步包含宏任务和微任务,异步中微任务是优于宏任务执行的)

JS执行顺序_第1张图片

JS执行顺序_第2张图片

                概念不懂,直接看下方!

JS 调用栈

JS调用栈采用的是后进先出(数据结构)的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。

它用于存储正在执行的 js代码块及其运行环境。每当创建一个新的执行上下文,就会将其添加到调用栈中。这个执行上下文包含了该函数或代码块执行所需的所有变量、参数、作用域等。

MacroTask(宏任务)

宏任务通常包括整体代码块(script),setTimeout,setInterval,setImmediate,I/O 操作等异步操作,它们会被推入到宏任务队列中等待执行。当主线程执行完当前任务后,会去检查宏任务队列,如果队列中有任务,就会从队列中取出一个任务执行,直到队列为空。

MicroTask(微任务)

微任务通常包括 Promise 的回调函数,process.nextTick,MutationObserver 等异步操作,它们会被推入到微任务队列中等待执行。当一个宏任务执行完成后,会检查微任务队列,如果队列中有任务,就会依次取出任务执行,直到队列为空。注意,微任务的执行时机是在当前宏任务执行结束后,下一个宏任务开始之前,也就是说微任务的执行优先级高于宏任务。

同步和异步事件举例

举例1:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');

    上方代码输出顺序:

Start
End
Promise
Timeout

JS执行顺序_第3张图片
举例2:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
setTimeout(() => console.log('Timeout 2'), 0);
Promise.resolve().then(() => console.log('Promise 2'));

    上方代码输出顺序:

Start
End
Promise
Promise 2
Timeout
Timeout 2

JS执行顺序_第4张图片

总结

总结一下,当 JavaScript 引擎执行代码时,先执行同步任务,执行完同步任务后,再开始执行异步任务,异步任务分宏任务微任务,如果遇到了宏任务,会将它放到宏任务队列中等待执行;如果遇到了微任务,会将它放到微任务队列中等待执行。当主线程执行完当前任务后,会先执行微任务队列中的任务,直到微任务队列为空,再去执行宏任务队列中的任务,直到宏任务队列为空。这样就保证了异步任务的执行顺序和及时性,避免了可能出现的竞态条件和阻塞情况。


参考文章:
参考①:js微宏任务https://www.jb51.net/article/271092.htm


不足的地方请指教~

你可能感兴趣的:(js,javascript,开发语言)