AJAX分块加载200MB文本至网页时Chrome崩溃，求可行解决方案

你当前的问题根源在于一次性发起近100个并发AJAX请求，浏览器的并发连接数有限，加上频繁的DOM节点追加操作，会导致内存占用急剧飙升，最终触发Chrome的崩溃机制。以下是可行的解决方案：

• 串行加载请求，避免并发过载
  不要一次性发起所有请求，改成完成一个请求后再发起下一个，这样能严格控制同时进行的请求数量，降低浏览器和服务器的压力。

• 批量更新DOM，减少重排重绘
  每次AJAX返回就调用append会频繁触发浏览器的DOM重排，积累大量内存开销。可以先把多个块的内容缓存到变量中，每积累几个块再一次性插入到DOM里，减少DOM操作次数。

• 服务器端优化（可选）

  • 允许请求指定范围的块（比如chunk=1-10），直接获取多块内容，减少请求总次数；
  • 开启Gzip压缩文本内容，大幅减少传输的数据量，降低加载耗时和内存占用。

修改后的代码示例 #

$(document).ready(function(){
    const totalChunks = 100;
    let currentChunk = 1;
    let contentBuffer = '';
    const bufferThreshold = 5; // 每积累5个块再更新DOM

    function loadNextChunk() {
        if (currentChunk > totalChunks) {
            // 插入最后剩余的内容
            if (contentBuffer) {
                $("#data_load").append(contentBuffer);
                contentBuffer = '';
            }
            return;
        }

        $.ajax({
            url: `runs.php?g=data&chunk=${currentChunk}`,
            success: function(result) {
                contentBuffer += result;
                currentChunk++;

                // 达到阈值或加载完成时更新DOM
                if (currentChunk % bufferThreshold === 1 || currentChunk > totalChunks) {
                    $("#data_load").append(contentBuffer);
                    contentBuffer = '';
                }

                // 发起下一个块的请求
                loadNextChunk();
            },
            error: function() {
                console.error(`加载块${currentChunk}失败，尝试重试`);
                loadNextChunk();
            }
        });
    }

    // 启动加载流程
    loadNextChunk();
});

额外注意事项 #

• 如果文本包含大量重复结构，可以在客户端做简单的合并或格式化，减少最终DOM节点的数量；
• 加载过程中可添加进度提示（比如显示当前加载进度百分比），提升用户体验；
• 确保服务器端对块请求的响应稳定，避免长时间挂起的请求占用资源。

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