如何在JavaScript中预加载JSON数据实现重复调用优化？

你可以通过页面初始化时异步加载并缓存所有俳句数据的方式，避免每次点击都重复请求整个JSON文件，具体实现如下：

核心实现思路 #

• 声明全局变量缓存数据，避免重复请求
• 页面加载时发起一次fetch请求，将数据存入缓存
• 点击按钮时直接从缓存中随机选取条目，无需再次请求

完整代码示例 #

// 全局变量，用于缓存所有俳句数据
let haikuData = null;
// 提前获取页面元素，避免重复DOM查询
const haikuButton = document.getElementById('haikuButton');
const line1El = document.getElementById('line1');
const line2El = document.getElementById('line2');
const line3El = document.getElementById('line3');

// 初始化加载所有俳句数据
async function loadHaikuData() {
    try {
        const response = await fetch('http://mywebsite/haikus.json');
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        haikuData = await response.json();
        // 数据加载完成后启用按钮，更新提示文本
        haikuButton.disabled = false;
        haikuButton.textContent = '获取随机俳句';
    } catch (error) {
        console.error('加载俳句数据失败:', error);
        haikuButton.textContent = '加载失败，请刷新页面';
    }
}

// 从缓存中随机选取一条俳句展示
function showRandomHaiku() {
    if (!haikuData) return; // 数据未加载完成时不执行操作
    const randomIndex = Math.floor(Math.random() * haikuData.length);
    const { line1, line2, line3 } = haikuData[randomIndex];
    line1El.textContent = line1;
    line2El.textContent = line2;
    line3El.textContent = line3;
}

// 页面DOM加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    // 初始状态禁用按钮，防止用户过早点击
    haikuButton.disabled = true;
    haikuButton.textContent = '加载中...';
    loadHaikuData();
    // 绑定按钮点击事件
    haikuButton.addEventListener('click', showRandomHaiku);
});

关键优化点 #

1. 取消硬编码数据长度：用haikuData.length代替固定的5145，后续JSON数据条数变化时无需修改代码
2. 加载状态反馈：初始时禁用按钮并显示加载提示，避免用户无效操作
3. 错误捕获处理：捕获请求和解析过程中的异常，给出清晰的错误提示
4. DOM元素预获取：提前获取页面元素，避免每次点击都重复查询DOM，提升性能

可选优化方向 #

如果担心JSON文件过大导致初始加载缓慢，可以考虑：

• 在服务器端开启gzip压缩，大幅减少JSON文件的传输体积
• 若数据量持续增长，可后端提供随机获取单条俳句的接口（比如/api/random-haiku），但这种方式每次点击仍需发起请求，适合超大数据量场景

内容的提问来源于stack exchange，提问作者Abraham Tellez