JS 事件循环：探索浏览器背后的计时器机制

2023-10-24 07:58:15

JS 事件循环 (Event Loop) 是浏览器用来处理事件和异步任务的机制。它是一个循环队列，当浏览器接收到一个事件或异步任务时，就会将其添加到队列中。然后，浏览器会从队列中取出一个事件或任务，并执行它。执行完成后，浏览器会再从队列中取出下一个事件或任务，并执行它。如此循环往复，直到队列中所有的事件和任务都被执行完毕。

JS 事件循环机制可以帮助浏览器实现非阻塞的执行方式。这意味着浏览器可以在执行一个任务的同时，处理其他事件和异步任务。这使得浏览器可以流畅地响应用户的交互，并执行各种后台任务。

JS 事件循环机制主要由以下几个部分组成：

事件队列 (Event Queue)： 事件队列用来存储浏览器需要处理的事件和异步任务。事件队列是先进先出的队列，这意味着先添加到队列中的事件或任务，将会先被执行。
任务队列 (Task Queue)： 任务队列用来存储需要执行的宏任务和微任务。宏任务包括普通函数、setTimeout() 和 setInterval() 函数；微任务包括 Promise、MutationObserver 和 process.nextTick() 函数。
渲染引擎 (Rendering Engine)： 渲染引擎负责将 HTML、CSS 和 JavaScript 代码转换为可以显示在屏幕上的内容。
GUI (Graphical User Interface)： GUI 是浏览器与用户交互的部分，包括按钮、文本框和菜单等元素。

JS 事件循环机制的工作流程如下：

浏览器接收到一个事件或异步任务，并将其添加到事件队列中。
浏览器从事件队列中取出一个事件或任务，并执行它。
如果执行的事件或任务是宏任务，那么浏览器会将其添加到任务队列中。
如果执行的事件或任务是微任务，那么浏览器会直接执行它。
浏览器依次执行任务队列中的宏任务和微任务。
浏览器将执行结果渲染到屏幕上。
浏览器重复步骤 1 到 6，直到事件队列和任务队列中的所有事件和任务都被执行完毕。

JS 事件循环机制面试题分析：

问题 1： 为什么 JavaScript 是单线程的，而浏览器是多线程的？

回答： JavaScript 是单线程的，是因为它只有一个调用栈。这意味着 JavaScript 代码只能一行一行地执行，不能同时执行多个任务。浏览器是多线程的，因为它有多个线程，可以同时执行多个任务。例如，浏览器可以同时执行 JavaScript 代码、渲染引擎和网络请求。

问题 2： 什么是事件循环 (Event Loop)？

回答： 事件循环是浏览器用来处理事件和异步任务的机制。它是一个循环队列，当浏览器接收到一个事件或异步任务时，就会将其添加到队列中。然后，浏览器会从队列中取出一个事件或任务，并执行它。执行完成后，浏览器会再从队列中取出下一个事件或任务，并执行它。如此循环往复，直到队列中所有的事件和任务都被执行完毕。

问题 3： 事件队列 (Event Queue) 和任务队列 (Task Queue) 有什么区别？

回答： 事件队列用来存储浏览器需要处理的事件和异步任务。事件队列是先进先出的队列，这意味着先添加到队列中的事件或任务，将会先被执行。任务队列用来存储需要执行的宏任务和微任务。宏任务包括普通函数、setTimeout() 和 setInterval() 函数；微任务包括 Promise、MutationObserver 和 process.nextTick() 函数。