龙空技术网

小郑详解JavaScript的运行机制

小郑搞码事 1740

前言:

如今小伙伴们对“js同步函数”大致比较关怀,看官们都想要分析一些“js同步函数”的相关内容。那么小编同时在网上收集了一些有关“js同步函数””的相关资讯,希望兄弟们能喜欢,你们一起来了解一下吧!

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

先来看这段代码,大家看表示什么意思。

一眼看过去,非常熟悉,通常我们会这样理解:这段代码表示1秒后,会执行setTimeout里面那个函数。

然而,这种解释并不准确, 那应该怎么理解呢? 我们先来理解JavaScript的远行机制。

本文最后我会给出JavaScript的运行机制完整图。但在这之前,我想先来给大家解释几个问题。

1. JavaScript为什么是单线程的?

JavaScript设计的初衷是用在浏览器中, 那么,我们来想象一下,如果JavaScript是多线程的话。

必然可以有两个进程,process1和process2,那么这两个进程可以同时对同一个DOM进行操作。如果这个时候,一个进程要删除这个DOM,另一个进程要编辑这个DOM。启不是矛盾嘛。

所以,这样应该更好理解,JS为什么是单线程了。

2. JavaScript为什么需要异步?

单线程为什么需要异步呢?

JavaScript如果不存在异步,而是自上而下执行,这样的话,假如上一行解析时间很长,那么下面的代码直接就会被阻塞。这种现象对于用户来说,意味着"卡死"。严重影响用户流失,这样解释好理解吧,所以JavaScript需要异步处理。

3. 单线程如何实现异步呢?

JavaScript竟然需要异步,那么它是如何实现异步的呢?

JavaScript是通过事件循环(event loop)来实现的,事件循环机制也就是今天要说的JavaScript运行机制。

(一)同步任务和异步任务

来看一段代码:

首先这段代码输出结果是啥?

输出:1 3 2

其中setTimeout需要延迟一段时间才去执行,这类代码就是异步代码。

看到这个结果,所以通常我们都这么理解JS的执行原理:

第一,判断JS是同步还是异步,同步进入主线程,异步则进入event table。

第二,异步任务在event table中注册函数,当满足触发条件后,被推入event queue(事件队列)。

第三,同步任务进入主线程后一直执行,直到主线程空闲,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程。

按到这个逻辑,上面这段实例代码,是不是就很好理解了。1,3是同步任务进入主要线程,自上而下执行,2是异步任务,满足触发条件后,推入事件队列,等待主线程有空时调用。

(二)宏任务(macro-task)和微任务(micro-task)

然而,按照同步和异步任务来理解JS的运行机制似乎并不准确。

来看一段代码。看看它的输出顺序。

上面这段代码,按同步和异步的理解,输出结果是:2,4,1,3。因为2,4是同步任务,按顺序在主线程自上而下执行,而1,3是异步任务,按顺序在主线程有空后自先而后执行。

可事实输出并不是这个结果,而是这样的:2,4,3,1。为什么呢?来理解一下宏任务和微任务。

宠任务:包括整体script代码,setTimeout,setInterval。

微任务:Promise,process.nextTick。

来看原理图:

嗯,对,这就是JS的运行机制。也就是事件循环。解释一下:

第一,执行一个宏任务(主线程的同步script代码),过程中如果遇到微任务,就将其放到微任务的事件队列里。

第二,当前宏任务执行完成后,会查微任务的事件队列,将将全部的微任务依次执行完,再去依次执行宏任务事件队列。

上面代码中promise的then是一微任务,因此它的执行在setTimeout之前。

需要注意的是:在node环境下,process.nextTick的优先级高于promise。也就是可以简单理解为,在宏任务结束后会先执行微任务队列中的nextTickQueue部分,然后才会执行微任务中的promise部分。

所以最后总结一下,对于文章一开头提到的那段代码,我们可以准确的理解为:

1秒后,setTimeout里的函数会被推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。也就是需要同时满足两个条件(1)1秒后。(2)主线程必须空闲,这样1秒后才会执行该函数。

现在,关于JavaScript的运行机制,大家应该都理解了,有问题欢迎留言。

标签: #js同步函数