写在开头:很多时候,我们会问什么是JS事件循环,它是干嘛的,但常常都是直接得到答案,也该问一问为什么会有JS事件循环,授人以鱼不如授人以渔。
1. 什么是事件
事件是发生在你正在编程的系统中的事情——当事件发生时,系统产生(或“触发”)某种信号,并提供一种机制,当事件发生时,可以自动采取某种行动(即运行一些代码)。事件是在浏览器窗口内触发的,并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素,一组元素,当前标签中加载的 HTML 文档,或整个浏览器窗口。有许多不同类型的事件可以发生。
以上描述来自MDN
简言之就是在当前系统中发生的所有事情并对这些事件发生时采取的行动。JS事件循环的产生,并不是因为JS,而是因为其是运行在浏览器中,由于浏览器的运行机制才产生JS的事件循环机制。因此想要真正理解JS事件循环,需要先了解浏览器运行机制。
2. 浏览器的进程模型
2-1. 进程
程序运行需要有专属的内存空间,可以把这块内存空间简单的理解为进程。
进程图片
每个应用至少有一个进程,进程之间相互独立。进程之间可以通信,但需要彼此同意。
2-2. 线程
有了内存空间,就可以运行程序的代码了,运行代码的“人”,其实就是线程。
一个进程至少有一个线程,在进程开启后会自动创建一个线程运行代码,该线程称之为主线程。
如果程序需要同时执行多个代码,主线程就会启动更多的线程来执行代码,所以一个进程中可以包含多个线程。
浏览器一个标签页就是一个进程。
浏览器最主要的进程有; 1.浏览器进程;主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
2.网络进程;负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
3.渲染进程:渲染进程启动后,会开启一个渲染主线程,主线程负责执行 HTML、CSS、JS代码。默认情况下:浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影响。
2-3.渲染主线程如何工作
渲染主线程是浏览器最繁忙的线程,需要它处理的任务包括但不限于:
- 解析HTML
- 解析CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画60次
- 执行全局JS代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......
思考题:为什么渲染进程不适用多个线程来处理这些事情
臣妾做不到啊~~~~~~~~
2-3-1.渲染器主线程工作流程
- 在最开始的时候,渲染主线程会进入一个无限循环
- 每一次循环会检查消息队列中是否有任务存在,如果有,就取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态
- 其他所有进程(包括其他进程的线程)可以随时项消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务
整个过程,被称之为事件循环(消息循环)
2-3-2.若干解释
1.何为异步 代码在执行过程中,会遇到一些无法立即执行的任务,比如:
- 计时完成后需要执行的任务--setTimeout\setInterval
- 网络通信完成后需要执行的任务--xhr\fetch
- 用户操作后需要执行的任务--addEventListener
如果让渲染主线程等待这些任务的时机,就会导致主线程长期处于【阻塞】的状态,从而导致浏览器【卡死】。
同步方式不可行,那就用异步
回到面试题如何理解JS的异步
JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个,而渲染主线程承担这诸多的工作,渲染页面、执行JS都在其中运行。如果使用同步的方式,就既有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。一方面会导致主线程白白消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。