面试题：JavaScript 事件循环在复杂场景下的应用与优化

JavaScript 事件循环可能存在的瓶颈分析

长时间执行的同步任务：当有大量复杂的同步代码执行时，会阻塞事件循环，导致 DOM 渲染、用户交互以及其他异步任务（如网络请求的回调、定时器回调等）无法及时处理，造成页面卡顿。例如，一个复杂的计算函数可能需要消耗较长时间来完成，在它执行期间，事件循环无法处理其他任务。
频繁的 DOM 操作：每次 DOM 操作都会触发浏览器的重排或重绘，这是比较消耗性能的。如果在事件循环的同一轮中频繁进行 DOM 操作，会增加事件循环的负担，导致整体性能下降。比如在一个循环中多次修改元素的样式属性。
大量定时器任务：过多的定时器任务可能会导致事件队列堆积。虽然定时器任务是异步的，但当定时器的回调函数执行时，会进入事件队列等待执行。如果短时间内有大量定时器回调需要执行，事件队列会变得很长，使得其他任务的执行延迟。

优化方案

使用 requestIdleCallback
- 利用事件循环机制改善性能的原理：requestIdleCallback 会在浏览器的空闲时段执行回调函数。事件循环在执行完所有同步任务和当前事件队列中的任务后，如果有空闲时间，就会执行 requestIdleCallback 注册的回调。这样可以避免在繁忙时段执行额外任务，从而减少对其他关键任务（如 DOM 渲染、用户交互事件处理）的影响。
- 代码示例：

// 优化前，假设这是一个复杂计算函数，会阻塞事件循环
function heavyCalculation() {
    for (let i = 0; i < 100000000; i++) {
        // 复杂计算
    }
}
// 模拟页面卡顿
heavyCalculation();

// 优化后
function optimizedHeavyCalculation() {
    requestIdleCallback(() => {
        for (let i = 0; i < 100000000; i++) {
            // 复杂计算
        }
    });
}
optimizedHeavyCalculation();

- **效果对比**：优化前，执行 `heavyCalculation` 函数时，页面会明显卡顿，用户交互无响应。优化后，使用 `requestIdleCallback` 执行同样的计算任务，不会影响页面的正常交互和渲染，只有在浏览器空闲时才会执行计算任务，用户体验得到极大改善。

2. 防抖与节流 - 利用事件循环机制改善性能的原理：防抖是指在事件触发后，等待一定时间（例如 300ms），如果在这段时间内事件再次触发，则重新计时，只有在指定时间内没有再次触发事件，才会执行回调函数。节流是指在一定时间间隔内（例如 200ms），无论事件触发多少次，都只执行一次回调函数。通过防抖和节流，可以减少频繁触发事件带来的大量回调任务进入事件队列，从而减轻事件循环的负担。 - 代码示例：

// 防抖函数
function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 节流函数
function throttle(func, interval) {
    let lastTime = 0;
    return function() {
        const context = this;
        const args = arguments;
        const now = new Date().getTime();
        if (now - lastTime >= interval) {
            func.apply(context, args);
            lastTime = now;
        }
    };
}

// 假设这是一个频繁触发的事件回调函数，比如窗口滚动事件回调
function handleScroll() {
    // 复杂操作，如获取滚动位置并更新 DOM 等
}

// 优化前，直接绑定事件，会频繁触发 handleScroll
window.addEventListener('scroll', handleScroll);

// 优化后，使用防抖
window.addEventListener('scroll', debounce(handleScroll, 300));
// 或者使用节流
window.addEventListener('scroll', throttle(handleScroll, 200));

- **效果对比**：优化前，窗口滚动时 `handleScroll` 函数会频繁触发，大量任务进入事件队列，可能导致页面卡顿。优化后，使用防抖或节流，事件队列中的任务数量大幅减少，事件循环可以更高效地处理其他任务，页面滚动更加流畅，卡顿现象明显减轻。

3. Web Workers - 利用事件循环机制改善性能的原理：Web Workers 允许在后台线程中运行脚本，与主线程的事件循环相互独立。主线程可以向 Web Worker 发送消息，Web Worker 计算完成后再将结果返回给主线程。这样可以避免复杂计算在主线程中阻塞事件循环，保证主线程的事件循环能够顺畅地处理 DOM 渲染、用户交互等任务。 - 代码示例： 主线程代码（index.js）：

const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};
worker.postMessage({ data: 'Some data for calculation' });

Web Worker 代码（worker.js）：

self.onmessage = function(event) {
    // 复杂计算
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
        result += i;
    }
    self.postMessage(result);
};

- **效果对比**：优化前，如果在主线程进行复杂计算，会阻塞事件循环，页面出现卡顿。优化后，通过 Web Workers 将复杂计算放在后台线程执行，主线程的事件循环不受影响，页面可以正常响应用户交互，同时得到计算结果，提升了用户体验。

星途面试题库

面试题：JavaScript 事件循环在复杂场景下的应用与优化

知识考点

面试题答案

JavaScript 事件循环可能存在的瓶颈分析

优化方案