浏览器相关

浏览器相关

1. 了解浏览器的事件循环吗？
   事件循环会维护一个或多个任务队列，事件可以作为任务源往队列中加入任务，一次完整的事件循环的过程是：事件循环会一直运行，不断地从任务队列中取出任务来执行。当任务队列为空的时候，事件循环会等待新的任务被加入队列。只有当程序明确停止事件循环或者程序自然结束时，事件循环才会停止。
   https://blog.csdn.net/m0_46374969/article/details/119969908
   1.1 为什么JS在浏览器中会有事件循环的机制？
   JS 本身是单线程的，这意味着它在同一时间只能执行一个任务。如果按照传统的同步执行方式，像用户点击、页面渲染、脚本执行、网络请求这些操作就会相互阻塞。比如用户点击了一个按钮，触发了一个耗时的脚本执行，那么在这期间页面渲染就会被卡住，用户体验就会很差。引入事件循环机制，实现了非阻塞的效果，让这些任务能够合理地安排执行顺序，不互相干扰。事件循环机制能够将一些异步任务（如定时器、网络请求等）放入任务队列中，当主线程执行栈为空时，再从任务队列中取出任务执行，这样就实现了高效的并发处理，让JS在单线程的情况下也能流畅地处理各种复杂的交互操作。
   1.2 事件循环机制中任务分为哪两种？
   在事件循环机制中，任务分为宏任务和微任务，常见的有：
   宏任务（Macrotask）：
   ■ 脚本的初始执行（即整个脚本的同步代码部分）
   ■ setTimeout()、setInterval()、setImmediate()
   ■ I/O 操作（比如网络请求）
   ■ UI渲染（页面的重绘和重排）
   微任务（Microtask）：
   ■ new Promise().then、new Promise().catch()
   ■ new MutationObserver()
   ■ process.nextTick()
   1.3 为什么要引入微任务的概念，只有宏任务可以吗？
   宏任务的执行顺序是先进先出，每次从宏任务队列中取出一个任务执行，如果在一个宏任务中包含了多个异步的操作，这些操作会依次放入到宏任务队列，就导致了执行顺序的延迟了，这里，Nested timeout 的回调被延迟执行，因为它被放入了宏任务队列的末尾：
   setTimeout(() => {
   console.log(“First timeout”);
   setTimeout(() => {
   console.log(“Nested timeout”);
   }, 0);
   }, 0);

setTimeout(() => {
console.log(“Second timeout”);
}, 0);

输出：

First timeout
Second timeout
Nested timeout
为了更好地处理复杂的异步操作，尤其是那些依赖于当前任务结果的操作，如下如果没有微任务机制，Second promise 的回调会被放入宏任务队列，导致执行顺序延迟
Promise.resolve().then(() => {
console.log(“First promise”);
return Promise.resolve(“Second promise”);
}).then(result => {
console.log(result);
});
1.4 node 中的事件循环和浏览器中的事件循环有什么区别？
浏览器和Node.js的事件循环在基本原理上相似，但具体实现和应用场景有所不同。
浏览器的事件循环更侧重于用户交互和页面渲染，而Node.js的事件循环更侧重于I/O操作和网络请求。
Node.js v10之后，事件循环机制与浏览器的事件循环机制更加接近，但仍有区别，比如https://blog.csdn.net/zrblue/article/details/147924454?sharetype=blogdetail&sharerId=147924454&sharerefer=PC&sharesource=zrblue&spm=1011.2480.3001.8118。
1.5 微任务和宏任务的在浏览器和node中的执行顺序都是怎么样的？
Node.js的事件循环
○ 执行顺序：
ⅰ. 执行同步代码：主线程按顺序执行所有同步代码。
ⅱ. 执行微任务：在每次宏任务执行完毕后，执行所有微任务（如Promise的.then()回调、process.nextTick回调）。
ⅲ. 执行宏任务：Node.js的事件循环分为六个阶段，按顺序执行宏任务：
1. timers阶段：执行setTimeout和setInterval的回调。
2. pending callbacks阶段：执行上一轮事件循环遗留的I/O回调。
3. idle/prepare阶段：内部使用，通常忽略。
4. poll阶段：执行I/O操作的回调。
5. check阶段：执行setImmediate的回调。
6. close callbacks阶段：执行关闭回调。
浏览器的事件循环
○ 执行顺序：
ⅰ. 执行同步代码：主线程按顺序执行所有同步代码。
ⅱ. 执行微任务：在每次宏任务执行完毕后，执行所有微任务（如Promise的.then()回调）。
ⅲ. 执行宏任务：从宏任务队列中取出任务执行，包括setTimeout、setInterval、I/O操作等。
ⅳ. 渲染更新：在每次宏任务执行后，浏览器会检查是否有DOM更新，并重新渲染页面。