面试题：JavaScript 滚动加载中如何优化性能及处理重复请求

Question

在JavaScript实现文档滚动加载内容时，频繁触发加载请求可能导致性能问题，并且可能出现重复请求相同内容的情况。请阐述如何优化滚动加载的性能，以及如何避免重复请求相同的内容，给出详细的实现思路和关键代码。

Answer 1

优化滚动加载性能

1. 节流（Throttle）
   • 思路：通过设置一个时间间隔，确保在这个时间内只触发一次加载请求。这样可以限制频繁触发的频率，减少不必要的计算和请求。
   • 关键代码：

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}
// 使用示例
window.addEventListener('scroll', throttle(() => {
    // 滚动加载逻辑
}, 300));

2. 防抖（Debounce）
   • 思路：当事件触发时，设定一个延迟时间，在延迟时间内如果事件再次触发，则重新计算延迟时间。只有在延迟时间结束且没有新的事件触发时，才执行加载请求。这样可以避免短时间内多次触发导致的性能问题。
   • 关键代码：

function debounce(func, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}
// 使用示例
window.addEventListener('scroll', debounce(() => {
    // 滚动加载逻辑
}, 300));

避免重复请求相同内容

1. 记录已请求的数据
   • 思路：维护一个数据结构（如数组或对象），记录已经请求过的数据的标识（例如API请求的页码、ID等）。每次请求前检查该标识是否已经在记录中，如果存在则不再发起请求。
   • 关键代码：

// 假设使用数组记录已请求的页码
let requestedPages = [];
function loadData(page) {
    if (requestedPages.includes(page)) {
        return;
    }
    requestedPages.push(page);
    // 发起加载数据的请求
}

2. 使用缓存
   • 思路：利用浏览器缓存机制（如localStorage、sessionStorage）或内存缓存（在JavaScript对象中存储数据）。每次请求前先检查缓存中是否存在所需数据，如果存在则直接使用缓存数据，避免重复请求。
   • 关键代码：

// 内存缓存示例
let dataCache = {};
function loadData(key) {
    if (dataCache[key]) {
        return dataCache[key];
    }
    // 发起请求获取数据
    let newData = fetchData(key);
    dataCache[key] = newData;
    return newData;
}

// localStorage缓存示例
function loadData(key) {
    let cachedData = localStorage.getItem(key);
    if (cachedData) {
        return JSON.parse(cachedData);
    }
    // 发起请求获取数据
    let newData = fetchData(key);
    localStorage.setItem(key, JSON.stringify(newData));
    return newData;
}