旧服务器返回JSON缓慢，如何优化客户端人员检索页面加载性能？

1. 修复本地缓存逻辑错误 #

你当前的缓存代码完全未生效：你直接将XMLHttpRequest实例对象存入了localStorage，而非实际返回的JSON数据，导致每次页面加载依然会发起完整请求，同时读取缓存时也无法得到正确的JSON内容。

2. 优化请求执行逻辑 #

你当前使用的是同步XMLHttpRequest（open方法第三个参数为false），会直接阻塞页面渲染线程，在请求返回前页面完全无法交互，加剧了用户的等待感知。建议调整逻辑优先级：先读取本地缓存，确认无有效缓存时再发起异步请求，参考代码如下：

$(document).ready(function() {
    // 先尝试读本地缓存，同时判断缓存是否过期（这里设有效期24小时，可按需调整）
    const cachedData = localStorage.getItem("personJsonData");
    const cacheTime = localStorage.getItem("personJsonCacheTime");
    const expireTime = 24 * 60 * 60 * 1000; // 24小时有效期

    if (cachedData && cacheTime && (Date.now() - parseInt(cacheTime)) < expireTime) {
        // 有有效缓存直接用
        const retrievedObject = JSON.parse(cachedData);
        initPage(retrievedObject);
        return;
    }

    // 无有效缓存才发异步请求
    const request = new XMLHttpRequest();
    request.open("GET", "linktojson.json", true); // 第三个参数改为true，异步请求
    request.onload = function() {
        if (request.status === 200) {
            const jsonData = request.responseText;
            // 存数据+存缓存时间
            localStorage.setItem("personJsonData", jsonData);
            localStorage.setItem("personJsonCacheTime", Date.now().toString());
            const retrievedObject = JSON.parse(jsonData);
            initPage(retrievedObject);
        }
    };
    request.send(null);

    // 页面初始化逻辑封装
    function initPage(data) {
        console.log(data);
        // 原来的业务逻辑写在这里
    }
});

3. 服务端轻量优化（无需升级硬件） #

因为已经确认静态JSON请求速度很快，针对老旧非营利服务器，可以做几个零成本优化：

• 新增定时脚本，按数据更新频率（比如每1/6/12小时）提前把datarecord序列化后写入静态.json文件，所有请求直接返回静态文件即可，避免每次请求都执行JSON.stringify和动态计算逻辑
• 给JSON请求配置缓存响应头，设置Cache-Control: public, max-age=86400，让浏览器、CDN层默认缓存文件，不需要前端手动处理缓存也能减少重复请求
• 开启服务端的gzip或brotli压缩，JSON文本压缩率通常能达到70%以上，大幅减少传输耗时

4. 用户体验优化 #

可以在页面加载时加个简单的加载提示，告知用户数据正在加载，避免用户误以为页面故障。如果后续数据量继续增长，还可以做增量更新，每次只请求变更的数据，不用全量拉取。

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