[JavaScript]了解事件循环

---

前言

记录自己的学习过程

---

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

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

二、几个重要的名词

0.同步和异步

举一个例子：模拟顾客到餐厅买饭的过程

• 同步
  规则：JavaScript是单线程的，所以这里只有一个服务员，一个服务员每次服务一位客人，包含点菜到把菜送到客人手里，之后才继续服务下一位.
  优点：井然有序，不会出现菜送错的情况
  缺点：如果某位顾客点的菜很多，则后面的顾客就只能干等，什么都做不了(即下面阻塞的概念)

小结：大多数的代码都是同步代码，即自上而下运行，这样的代码不容易出错，因为代码的运行顺序是已知，但如果某个函数的运行速度太慢，则会拖慢整个程序

演示：

• 异步

  • 单线程非阻塞实现(JavaScript)
    规则：JavaScript是单线程的，所以这里只有一个服务员，一个服务员每次服务一位客人，但在客户点单，我们把信息通知给后厨后，我们不会等后厨把饭做完，而是接着服务下一位客户，直到后厨把菜做好后我们才把饭送到对应的客户手中。
    优点：在有大胃王的时候，这是我们的效率就明显比同步快很多
    缺点：存在一种可能，如果你点的菜很多，而你后面那个人点的菜点的很少，那么有可能你先到，但你比他晚完成订单，这一定程度上说明异步代码会有随机性，你不能确切的知道每个函数执行完毕的先后顺序

  小结：在存在需要执行很长的代码时，使用异步代码的效率会高于同步代码，但在一些方面也存在着安全问题，因为你不能确切的知道每个函数执行完毕的先后顺序，如果其中有一些代码是依赖于前面的代码的结果，但可能因为异步的原因，俩部分代码基本上同时开始执行，这时后面的代码就不能获取到想要的数据，程序就会报错

  演示：
  

  • 多线程实现(Java, C++等)
    多线程相较于单线程非阻塞就简单粗暴多了，因为没有单线程的限制，直接增加服务员的数量，这也是提升效率的方法
    缺点: 因为服务员多，所以人力成本直线上升(资源消耗大)，如果店的生意好那还可以，如果店里很多服务员(线程)基本都是闲置状态，资源白白的浪费了，而且人一多，就容易造成混乱。

1.调用栈(call stack)

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

• 栈(一种后进先出的数据结构)
• 通过代码来了解调用栈的原理

function f1() {
	console.log('777');
}
function f2() {
	f1();
}
function f3() {
	f2();
}
f1();

1. 当JS首次读取文件时，会创建一个全局执行上下文并push到当前调用栈中
   
2. 然后自上到下，当进入某个函数时，这个函数就会被放到栈堆里，函数执行完毕后就将函数推出栈堆

调用栈的执行过程:

3. 调用栈的大小也是有限的
   举个例子:

function foo() {
  foo();
}

foo();

当无限递归自身时，调用栈中会超出最大容量，浏览器会终止程序，并返回Error.

---

2.阻塞

阻塞没有严格的定义，一般指代码执行比较慢，因为JavaScript是单线程，所以在同步代码中，当某行代码运行时间较慢，这时无法立即执行下面的代码，而是需要等待代码执行完毕后才能继续，这段代码需要多久，就需要等多久，这时程序就相当于卡在这个地方 (阻塞)

2.1 阻塞的问题

当浏览器在运行JS代码时，不能同时做其他任何事情，所以在网页上出现阻塞时，页面就呈现出一种卡住的状态.这是我们不能接受的

2.2 阻塞的解决办法

• 异步回调

未完待续…

其他

---

结语🧡🧡

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