[JavaScript]了解事件循环

发布于:2022-11-09 ⋅ 阅读:(17) ⋅ 点赞:(0) ⋅ 评论:(0)


前言

记录自己的学习过程


一、为什么要学事件循环?

浏览器中 JavaScript 的执行流程和 Node.js 中的执行流程都是基于事件循环的。
理解事件循环的工作方式对于代码优化很重要,有时对于正确的架构也很重要。

二、几个重要的名词

1.调用栈(call stack)

JavaScript是一个单线程的语言, 只有一个调用栈, 所以一个时间只能做一件事情

  • 栈(一种后进先出的数据结构)
  • 通过代码来了解调用栈的原理
    通过代码来更好理解:
function f1() {
	console.log('777');
}
function f2() {
	f1();
}
function f3() {
	f2();
}
f1();
  1. 当JS首次读取文件时,会创建一个全局执行上下文并push到当前调用栈中
    在这里插入图片描述
  2. 然后自上到下,当进入某个函数时,这个函数就会被放到栈堆里,函数执行完毕后就将函数推出栈堆

调用栈的执行过程:
在这里插入图片描述

  1. 调用栈的大小也是有限的
    举个例子:
function foo() {
  foo();
}

foo();

在这里插入图片描述
当无限递归自身时,调用栈中会超出最大容量,浏览器会终止程序,并返回Error.


未完待续…

2.阻塞

3.宏任务队列

4.微任务队列

5.其他


结语🧡🧡

如果本文对你有帮助, 帮我点个赞👍(关注更好🥰