面试题：JavaScript跨浏览器处理文档滚动边界及性能调优

实现跨浏览器兼容的文档滚动边界检测及处理方案

基本思路
- 监听 scroll 事件，获取当前滚动位置，判断是否到达顶部或底部边界。
- 根据边界情况触发相应的业务逻辑。
代码实现

document.addEventListener('scroll', function () {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // 检测是否到达顶部
    if (scrollTop === 0) {
        // 触发顶部业务逻辑，如改变页面布局
        console.log('到达顶部，执行相关业务逻辑');
    }

    // 检测是否到达底部
    if (scrollTop + clientHeight >= scrollHeight - 1) {
        // 触发底部业务逻辑，如加载新数据
        console.log('到达底部，执行相关业务逻辑');
    }
});

不同浏览器内核下的性能调优

Chrome浏览器
- 使用 requestIdleCallback：Chrome 支持 requestIdleCallback，可以利用它在浏览器空闲时段执行一些非紧急的任务，比如在滚动到边界触发加载新数据时，如果数据加载不是非常紧急，可以将加载任务放到 requestIdleCallback 中执行，避免阻塞主线程。
- 节流与防抖：对于频繁触发的 scroll 事件，使用节流（throttle）或防抖（debounce）技术。节流是指在一定时间内只执行一次函数，比如每 200 毫秒执行一次滚动事件处理函数，防止频繁触发导致性能问题。防抖则是在事件触发后，等待一定时间，如果这段时间内没有再次触发，则执行函数，如果再次触发则重新计时。在滚动场景中，防抖可能不太适用，因为滚动事件很频繁，而节流可以保证在滚动过程中按一定频率执行处理逻辑。
Firefox浏览器
- 硬件加速：Firefox 同样支持利用 CSS 的 will-change 属性来提示浏览器提前准备相关资源，进行硬件加速。例如，如果滚动到底部要改变某些元素的布局，可以提前对这些元素设置 will - change: transform 或 will - change: layout 等属性（注意，滥用 will - change 可能会消耗更多资源，需谨慎使用）。
- 优化事件绑定：确保 scroll 事件处理函数内部逻辑尽量简单，避免在处理函数中进行复杂的 DOM 操作。如果必须进行 DOM 操作，可以将多个操作合并，减少重排和重绘次数。
Safari浏览器
- 使用 passive 选项：在 Safari 中监听 scroll 事件时，设置 passive: true 选项可以提高滚动性能。passive 选项告诉浏览器，该监听器不会调用 preventDefault() 方法，这样浏览器可以更流畅地处理滚动，而无需等待 JavaScript 处理函数执行完毕。例如：

document.addEventListener('scroll', function () {
    // 处理逻辑
}, {passive: true});

避免复杂计算：Safari 在处理复杂的 JavaScript 计算时可能性能不佳，所以在滚动事件处理函数中，要尽量避免进行大量的数学计算、字符串拼接等操作。如果有复杂计算，可以将其放到 requestAnimationFrame 中执行，利用浏览器的下一帧绘制时机来处理，保证滚动的流畅性。

星途面试题库

面试题：JavaScript跨浏览器处理文档滚动边界及性能调优

知识考点

面试题答案

实现跨浏览器兼容的文档滚动边界检测及处理方案

不同浏览器内核下的性能调优