面试题：JavaScript 文档滚动位置的优化处理

Question

在大型单页应用中，频繁监听文档滚动位置可能会导致性能问题。请阐述如何优化 JavaScript 处理文档滚动位置的操作，以避免性能瓶颈。例如，如何使用节流（throttle）或防抖（debounce）技术来优化滚动事件的监听，并提供相关代码示例。

Answer 1

1. 节流（Throttle）技术优化

节流的原理是在一定时间间隔内，无论触发多少次事件，都只执行一次。比如，在滚动事件中，每 n 毫秒执行一次处理函数，而不是每次滚动都执行。

代码示例：

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}

// 使用节流优化滚动事件
window.addEventListener('scroll', throttle(() => {
    console.log('滚动事件被节流处理：', window.pageYOffset);
}, 200));

2. 防抖（Debounce）技术优化

防抖的原理是当事件触发后，延迟 n 毫秒执行函数，如果在这 n 毫秒内事件再次触发，则重新计时，直到最后一次触发事件后的 n 毫秒后才执行函数。

代码示例：

function debounce(func, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}

// 使用防抖优化滚动事件
window.addEventListener('scroll', debounce(() => {
    console.log('滚动事件被防抖处理：', window.pageYOffset);
}, 200));

3. 其他优化建议

• 减少处理函数复杂度：滚动事件处理函数内尽量只做必要的计算和操作，避免复杂的 DOM 操作或大量数据计算。
• 使用 requestAnimationFrame：如果是做与动画相关的滚动效果，可以结合 requestAnimationFrame，它会在浏览器下一次重绘之前执行回调函数，并且执行频率和浏览器刷新频率一致，性能更好。

function handleScroll() {
    // 滚动相关处理
    requestAnimationFrame(() => {
        // 动画相关操作
    });
}
window.addEventListener('scroll', handleScroll);