浏览器的循环机制

浏览器的循环机制主要指的是事件循环（Event Loop），它是浏览器实现异步编程的核心机制，用于协调和处理各种任务，确保浏览器能够高效地响应用户操作和执行各种异步操作。以下是对浏览器事件循环机制的详细介绍：

执行栈（Execution Stack）

• 当 JavaScript 代码执行时，会将函数调用、变量声明等操作按照顺序放入执行栈中。函数执行时，相关的上下文信息会被压入栈顶，函数执行完毕后，其上下文会从栈顶弹出。比如在一个简单的函数调用function foo() { bar(); } function bar() { console.log('bar'); } foo();中，先将foo函数压入执行栈，在foo函数中调用bar函数时，又将bar函数压入栈顶，bar函数执行完弹出，foo函数执行完也弹出。

任务队列（Task Queue）

• 宏任务队列（Macro Task Queue）：宏任务包括整体的 JavaScript 代码块、setTimeout、setInterval、I/O操作、UI渲染等。浏览器会将这些宏任务依次放入宏任务队列中。例如，当遇到setTimeout函数时，会在指定的延迟时间后将其回调函数放入宏任务队列。
• 微任务队列（Micro Task Queue）：微任务包括Promise.then、MutationObserver等。微任务的优先级高于宏任务，当执行栈为空时，会优先执行微任务队列中的任务。比如在Promise.resolve().then(() => console.log('microtask'))中，console.log('microtask')会被放入微任务队列。

!!!一次循环，宏任务执行一个，清空微任务队列。

事件循环过程

1. 初始化：浏览器启动后，首先会将整体的 JavaScript 代码作为一个宏任务放入宏任务队列。
2. 执行宏任务：从宏任务队列中取出一个宏任务，放入执行栈中执行。在执行过程中，如果遇到新的宏任务，会将其添加到宏任务队列末尾。
3. 检查微任务：当宏任务执行完毕，执行栈为空时，会立即检查微任务队列。如果微任务队列中有任务，会依次将它们放入执行栈中执行，直到微任务队列为空。
4. 渲染 UI：在微任务队列执行完毕后，浏览器会进行 UI 渲染，更新页面的显示状态。
5. 循环往复：完成 UI 渲染后，再次从宏任务队列中取出下一个宏任务，重复上述过程，不断循环，使得浏览器能够持续响应用户操作、处理异步事件等。

导致强制渲染的方法：

事件循环机制使得浏览器能够有条不紊地处理各种任务，保证了页面的流畅性和响应性，让异步操作能够按照预期的顺序执行，避免了阻塞和混乱。