聊聊刚入行也能理解的JavaScript运行机制

前言

大家好,我是梁木由,一个有想头的前端。JavaScript知识点真是无穷无尽,今天来理解下JavaScript运行机制。

JavaScript单线程机制

JavaScript是一门单线程语言,就注定它同一时间内就只能做一件事,只能自上而下执行,那么如果上一行解析时间很长,那下面代码就会被阻塞,那对用户而言体验感是非常不友好的。于是JavaScript出现了同步任务异步任务

JavaScript事件循环

同步

程序的执行顺序与任务的排列顺序是一致的、同步的。比如要烧水煮饭,需等水开了,再去煮

异步

在做这件事的同时,你还可以去处理其他事情。比在烧水的同时,可以去切菜

看看同步任务与异步任务的执行过程

聊聊刚入行也能理解的JavaScript运行机制_第1张图片
我们先来看一个问题

setTimeout(() => {
  console.log('setTimeout')
})
​
new Promise((resolve) => {
  console.log('promise')
  resolve()
}).then(() => {
  console.log('then')
})
​
console.log('console')

根据上述,那么执行结果应该是

promise
console
setTimeout
then

哎不对呀,与实际输出结果不相符

promise
console
then
setTimeout

宏任务与微任务

我们知道,虽然都是异步任务,但是promisesetTimeout却是不同的异步任务,异步任务有两种

  • 宏任务(scriptsetTimeoutsetIntervalAjax,UI渲染,I/OpostMessage等)
  • 微任务(promiseprocess.nextTick

不同的任务也会进入不同的队列中,所以在执行异步任务时也会进入不同的事件队列

聊聊刚入行也能理解的JavaScript运行机制_第2张图片

这样的话,就理解为什么输出结果是

promise
console
then
setTimeout

事件循环

那给组合一下看看整体的事件循环机制

聊聊刚入行也能理解的JavaScript运行机制_第3张图片

总结

  • 异步任务分类:宏任务,微任务
  • 同步任务和异步任务分别进入不同的执行"场所"
  • 先执行主线程执行栈中的宏任务
  • 执行过程中如果遇到微任务,进入Event Table并注册函数,完成后移入到微任务的任务队列中
  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  • 主线程会不断获取任务队列中的任务、执行任务、再获取、再执行任务也就是常说的Event Loop(事件循环)。

你可能感兴趣的:(聊聊刚入行也能理解的JavaScript运行机制)