如何使用jQuery实现类似Facebook无需等待加载新内容的信息流

问题根因 #

你当前代码的阻塞问题完全来自await关键字：$.ajax本身默认是异步非阻塞的，加了await之后会强制阻塞$(document).ready的执行线程，直到请求完全返回、success逻辑执行完才会释放主线程，期间用户的所有点击、滚动操作都会无响应。

解决方法 #

1. 去掉await恢复异步执行

直接删除await即可让AJAX请求在后台独立运行，不会阻塞页面正常交互，数据返回后自动执行success回调更新DOM即可，修改后代码如下：

$(document).ready(function () {
    $.ajax({
        url: url,
        type: "GET",
        contentType: false,
        cache: false,
        processData: false,
        success: function (res) {
            // 原有DOM更新逻辑
        }
    });
    // 此处的其他初始化逻辑会直接执行，不需要等待AJAX返回
});

2. 优化DOM更新避免二次阻塞

就算请求不阻塞，1000条带图片的内容一次性插入DOM也会触发大量重绘重排导致页面卡顿，建议做分片插入：

success: function (res) {
    const allData = JSON.parse(res); // 按实际返回格式解析数据
    const container = document.querySelector('#内容容器的ID');
    const chunkSize = 20; // 每次插入20条，可自行调整
    let index = 0;

    function insertNextChunk() {
        if (index >= allData.length) return;
        // 用文档碎片减少DOM操作次数
        const fragment = document.createDocumentFragment();
        const end = Math.min(index + chunkSize, allData.length);
        for (let i = index; i < end; i++) {
            const item = allData[i];
            const itemNode = document.createElement('div');
            // 生成单条内容结构，图片加lazy属性懒加载
            itemNode.innerHTML = `<div class="item">
                <p>${item.text}</p>
                <img src="${item.img_src}" loading="lazy" alt="内容图">
            </div>`;
            fragment.appendChild(itemNode);
        }
        container.appendChild(fragment);
        index = end;
        // 下一帧再执行下一批插入，不阻塞主线程交互
        requestAnimationFrame(insertNextChunk);
    }
    insertNextChunk();
}

3. 额外优化建议

• 后端可以拆分成分页接口，首次只拉前20条展示，剩余内容后台分批拉取或者滚动到对应位置再拉，进一步降低初始加载压力
• 图片尽量提前做压缩、切不同尺寸的适配图，减少图片加载时的资源占用

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