当前位置: 首页 > 网络应用技术

浏览器事件周期(事件循环)的巨大白话解释

时间:2023-03-08 16:34:56 网络应用技术

  事件周期的概念非常简单。它是JavaScript引擎,执行任务并输入睡眠状态,等待更多任务之间的无限转换周期。

  它的功能是负责执行代码,收集和处理事件以及执行队列中的子任务。

  处理的逻辑非常简单:

  但是,其中有更多详细的问题。

  一般而言,任务分为以下内容:

  根据上述任务的调用方法,我们也可以分为同步任务和异步任务。

  我们知道JavaScript是一种单个线程语言,主线程无论如何都只能做一件事。但是它所在的环境将提供JavaScript多线程的能力。

  这种异步调度能力由浏览器或节点环境授予,V8引擎负责调度管理。代码在后台运行,然后等到正确的时间输出。)

  我们需要弄清楚事件循环中的同步任务和异步任务如何由管理层管理

  多个任务形成任务队列,即“宏任务队列”

  任务队列遵循高级原理。例如,上图,JavaScript引擎将首先运行脚本代码,然后运行用户事件,然后执行计时器任务。

  这里有两个细节:

  由于该任务是首先提出的,因此我们需要弄清楚哪些任务是高级的,哪些任务是向后的。

  以下是如何管理同步任务和异步任务。在此之前,我们需要知道哪种代码是异步的

  以上代码是异步的。让我们从Settimeout开始,如何执行?

  我在其上设置了一个10S计时器,然后执行同步任务。我看到了对我的电脑的影响

  可以看出,尽管将异步任务设置为10秒,但仅在13秒后打印。这表明

  第一个结论非常容易理解。JavaScript是单个线程。它的规则是在执行异步代码之前先执行同步代码。

  因此,结合第二个结论,Settimeout的倒计时在哪里?

  答案是浏览器提供的计时器触发线程。该线程将代码放在任务队列上。同步任务结束后,JS线程将在计时器中调用任务。

  由于它被称为任务队列,因此它符合先进的条件。如果有两个计时器,那么判断谁是高级的是什么?当Settimeout中的任务进入任务队列时,这个问题可以扩展。

  我们继续执行实验,以证明代码已更改为

  这个时候的结果是

  显然,settimeout推送到任务队列的时机与时间设置设置有关。我们可以得出以下结论

  下面我们需要加入事件代码。我们需要了解的目标是事件代码和计时器更快,修改代码为以下内容

  运行上述代码时,我正在等待周期结束的12秒。

  目前,由于主线程仍在执行for循环的同步代码,因此“按钮”按钮具有被阻止的感觉。您会发现按钮的紧迫感觉已经消失了。这是因为JS线程正在执行任务。触发GUI线程呈现页面,因此会有页面卡死亡的幻想,但是此时,点击事件实际上已经触发了。

  让我们看看结果

  为什么按钮事件是执行的,而不是首先执行settimeout?

  如果您熟悉高级队列结构,则不可避免地会有这种疑问。从代码的角度来看,无论如何,必须将单击事件推到任务队列,比计时器为0,因此应该先执行计时器。

  这是因为事件是处理用户互动逻辑,因此优先级必须高于计时器,并且将首先推入任务队列。

  事件处理线程处理事件,并在事件发生后将其推到任务队列。直到JS线程执行同步代码,然后处理任务队列的任务,最后处理计时器。

  仍然是相同的代码,我们添加了承诺逻辑

  同样,在执行for循环代码期间,单击“按钮”按钮,然后悄悄等待12s查看结果

  可以更快地发现它,然后单击事件,最后是常规扳机。

  为什么承诺最快?

  执行任何其他操作。

  常见的宏任务如下

  常见的微任务如下

  您可能对我上面说的话有些怀疑,我在这里列出您的疑问

  第一个是对第一个问题的验证,该问题非常容易处理,如下所示:

  您会看到该页面渲染是在三秒钟后触发的,表明我们是正确的。执行同步代码时,渲染无效。(否则,在执行时应该是渲染的)

  接下来,我们验证第二个问题:在这里,我们需要添加micro -tasks,宏任务,以在正确的时间触发单击事件,代码就是这样。

  在等待结果的3s中,我单击了一点点,然后查看了结果:

  根据结果,我们可以找到

  以上测试证明了我们的结论是正确的

  页面可以在for循环时遵循渲染?

  答案是我们的结论。每个宏任务和Micro -Task在宏任务结束后运行。

  为了验证我们的结论,该代码在此处进行了修改

  可以看出,我们等同于打开100,000个计时器任务。每个计时器任务完成后,我们将在页面上渲染,然后开始下一个计时器任务。

  上面的代码仍然需要等到for循环结束,然后再将计时器任务逐一转动。我们需要知道这一点。

  最后,让我们使用此API修改代码,

  此API是微型任务。现在我们需要再次解释我们的结论:

  通过结果验证