循环用jQuery load()加载大文件致浏览器无响应，如何解决？

你遇到的这个问题其实很常见——虽然$.load()确实是异步发起请求，但一次性批量触发几十次请求，会让浏览器的资源处理能力达到瓶颈，进而阻塞UI线程。咱们一步步拆解原因和解决办法：

核心原因 #

1. 浏览器并发请求限制
   现代浏览器（包括Chrome和Safari）对同一域名的并发HTTP请求数有严格限制，一般是6-8个左右。当你一次性发起30-50次请求时，超出限制的请求会被浏览器放到队列里等待，直到前面的请求完成。虽然单个请求是异步的，但大量排队的请求加上后续的HTML解析、DOM插入操作，会持续占用主线程，导致UI无法响应用户操作。

2. 主线程资源耗尽
   每个1MB的HTML文件加载完成后，浏览器需要解析内容、更新DOM，这些操作都是在主线程执行的。短时间内集中处理几十次这样的DOM更新，会让主线程被占满，根本腾不出时间处理点击、滚动等用户交互事件，自然就出现了“无响应”的情况。

3. 潜在的闭包陷阱（次要但需注意）
   你的代码里在load的回调中引用了documentname[k]，如果是用var声明的k，会存在闭包问题——回调执行时k已经是循环结束后的数值，导致控制台打印的文件名可能不正确。不过这不是UI冻结的直接原因，但也是代码里的小隐患。

解决方案 #

1. 控制并发请求数量（最有效） #

不要一次性发起所有请求，而是分批加载，比如每次只发起6个请求，等这批全部完成后再加载下一批。示例代码如下：

$(document).ready(function() {
  const batchSize = 6; // 匹配浏览器并发限制
  let currentIndex = 0;

  function loadBatch() {
    if (currentIndex >= divname.length) return; // 所有请求完成

    const endIndex = Math.min(currentIndex + batchSize, divname.length);
    const promises = [];

    for (let k = currentIndex; k < endIndex; k++) {
      // 用Promise包装$.load，方便批量等待
      const promise = new Promise((resolve) => {
        $(`#${divname[k]}`).load(`${documentname[k]}.html`, function(a, b) {
          console.log(`${documentname[k]} was loaded`);
          resolve();
        });
      });
      promises.push(promise);
    }

    // 等当前批次全部完成后，加载下一批
    Promise.all(promises).then(() => {
      currentIndex = endIndex;
      loadBatch();
    });
  }

  loadBatch();
});

这里用Promise.all()等待当前批次的所有请求完成，再继续下一批，既符合浏览器的并发限制，又能避免主线程被瞬间压垮。

2. 优化请求本身 #

如果业务允许，尽量减少请求数量：

• 把多个小的HTML文件合并成一个，然后在前端拆分插入到对应的DOM节点中。
• 对HTML文件进行压缩，减小文件体积，加快加载和解析速度。

3. 修复闭包问题（可选但推荐） #

如果你的k是用var声明的，改成let就能解决回调中变量引用错误的问题（上面的示例代码已经用了let），或者用立即执行函数绑定当前的k值：

for (var k = 0; k < divname.length; k++) {
  (function(currentK) {
    $(`#${divname[currentK]}`).load(`${documentname[currentK]}.html`, function() {
      console.log(`${documentname[currentK]} was loaded`);
    });
  })(k);
}

这样调整后，浏览器就能平稳地处理加载请求，不会再出现UI冻结的情况了。

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