HTTP请求处理时加载动画卡顿问题求助

嘿，我一眼就发现问题所在了！你的加载动画卡顿的核心原因是同步XMLHttpRequest请求阻塞了浏览器主线程——哪怕你加了async/await也没用，因为你把请求的异步开关给手动关掉了！

问题根源分析 #

你在xmlhttp.open("GET", theUrl, false)里传入了第三个参数false，这会强制请求进入同步模式。在同步模式下，浏览器会暂停所有主线程的任务（包括动画渲染、用户交互），直到HTTP请求完全完成。这就是为什么前2秒动画正常，一旦请求开始，动画就直接卡顿的原因——主线程被死死占用，根本腾不出资源处理动画。

另外，async/await在这里完全无效，因为原生的XMLHttpRequest方法并不是Promise，直接await它们不会起到异步等待的作用。

修复方案 #

我们需要改成异步请求，并正确使用异步处理方式，让主线程能同时处理动画和网络请求。这里提供两种方案：

方案1：用Promise封装XMLHttpRequest（兼容旧浏览器）

把XMLHttpRequest包装成Promise，这样就能配合async/await正常使用，同时保持异步模式：

window.addEventListener('load', function() {
  setTimeout(function() {
    httpGet("https://pub.s7.exacttarget.com/akduztal2rq");
  }, 2000);
});

// 封装异步XHR为Promise
async function httpGet(theUrl) {
  return new Promise((resolve, reject) => {
    const xmlhttp = new XMLHttpRequest();
    // 第三个参数默认是true（异步），可以省略
    xmlhttp.open("GET", theUrl);
    
    xmlhttp.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        const responseText = xmlhttp.responseText;
        // 更新DOM并隐藏加载动画
        document.getElementById("h").innerHTML = responseText;
        document.getElementById("preloader").style.display = "none";
        resolve(responseText);
      } else {
        reject(new Error(`请求失败，状态码：${this.status}`));
      }
    };
    
    // 处理网络错误
    xmlhttp.onerror = function() {
      reject(new Error("网络连接出错"));
    };
    
    xmlhttp.send();
  });
}

方案2：使用现代的Fetch API（更简洁）

Fetch API是原生支持Promise的网络请求API，代码更简洁易读，推荐使用：

window.addEventListener('load', function() {
  // 这里需要加async，因为内部使用了await
  setTimeout(async function() {
    try {
      const response = await fetch("https://pub.s7.exacttarget.com/akduztal2rq");
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      const responseText = await response.text();
      // 更新DOM并隐藏加载动画
      document.getElementById("h").innerHTML = responseText;
      document.getElementById("preloader").style.display = "none";
    } catch (error) {
      console.error("加载内容出错：", error);
      // 即使出错也要隐藏加载动画，避免一直显示
      document.getElementById("preloader").style.display = "none";
    }
  }, 2000);
});

额外提示 #

• 一定要处理错误情况：不管是网络失败还是HTTP错误，都要隐藏加载动画，避免用户一直看到加载状态。
• 异步请求不会阻塞主线程，浏览器可以同时运行动画和处理网络请求，这样加载动画就能流畅运行直到请求完成。

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