异步处理XMLHttpRequest优化网页性能

还在使用同步XMLHttpRequest导致网页卡顿？本文深入剖析了同步XHR的弊端，重点讲解如何将同步请求升级为异步，告别浏览器主线程阻塞，提升用户体验。文章提供了两种解决方案：一是基于事件的异步XHR，通过监听事件处理响应，避免阻塞；二是推荐使用更现代的Fetch API，它基于Promise，代码更简洁直观，错误处理更方便。Fetch API已在主流浏览器中广泛支持，是处理HTTP请求的未来趋势。掌握异步XHR和Fetch API，告别网页性能瓶颈，打造更流畅的用户体验，让你的Web应用更具竞争力！

本教程旨在解决JavaScript中同步XMLHttpRequest导致的性能问题及废弃警告。我们将详细介绍如何将同步请求转换为异步XMLHttpRequest，并推荐使用更现代、基于Promise的Fetch API来高效获取HTTP头部信息，避免主线程阻塞，从而显著提升用户体验和页面响应速度。

在Web开发中，我们经常需要从服务器获取数据或文件信息。早期JavaScript通过XMLHttpRequest（XHR）对象提供了这一能力。然而，不当使用XHR，特别是以同步模式（Synchronous Mode）发起请求，会导致严重的性能问题和用户体验下降。浏览器会因此发出“Synchronous XMLHttpRequest on the main thread is deprecated”的警告，因为这种操作会阻塞浏览器主线程，使得页面在此期间无法响应用户输入或更新UI。本文将深入探讨同步XHR的弊端，并提供两种将HTTP请求异步化的解决方案：基于事件的异步XHR和更现代的Fetch API。

同步XMLHttpRequest的弊端

原始代码中，fetchHeader函数通过req.open("HEAD", url, false);发起了一个同步的HTTP HEAD请求。这里的第三个参数false明确指示了请求是同步的。这意味着在请求完成并返回响应之前，JavaScript的执行会被暂停，浏览器主线程被完全阻塞。当请求耗时较长（例如网络延迟或服务器响应慢）时，用户会感觉到页面“卡顿”甚至“无响应”，严重影响用户体验。

此外，原始代码使用window.setInterval每2.5秒调用一次fetchHeader。虽然setInterval本身是异步的，但它内部调用的fetchHeader是同步的，这意味着每隔2.5秒，页面都会经历一次短暂的卡顿。在多个窗口同时运行此类代码时，这种卡顿感会更加明显。

解决方案一：异步XMLHttpRequest

将同步XHR转换为异步XHR的核心在于利用其事件机制。当XHR请求以异步模式（默认即为异步，即open()方法的第三个参数为true或省略）发送时，请求会在后台进行，而JavaScript代码可以继续执行。当请求状态发生变化或完成时，XHR对象会触发相应的事件，我们通过监听这些事件来处理响应。

以下是使用异步XMLHttpRequest获取文件Last-Modified头部的示例代码：

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的HTTP头部

/**
 * 比较文件最后修改时间与当前时间，并更新UI
 * @param {number} time - 文件最后修改时间的Unix时间戳
 */
const compareTimeToNow = (time) => {
  let d = new Date(); // 当前时间
  let diffSec = Math.round((d - time) / 1000); // 计算时间差（秒）
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新页面显示

  // 特定业务逻辑：如果页面加载超过10秒且文件在5秒内有修改，则刷新页面
  if ((d - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload();
  } else {
    // 请求完成后，设置定时器，等待2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * XMLHttpRequest的load事件监听器
 * 当请求成功加载并接收到响应时触发
 */
function reqListener() {
  // console.log(this.responseText); // HEAD请求通常responseText为空
  // 获取Last-Modified头部，并转换为Date对象，然后获取其时间戳
  compareTimeToNow(new Date(this.getResponseHeader(whichHeader)).getTime());
}

/**
 * 发起HTTP HEAD请求获取文件头部信息
 */
const getHeader = () => {
  const req = new XMLHttpRequest();
  req.addEventListener("load", reqListener); // 监听load事件
  req.open("HEAD", url); // 默认是异步请求
  req.send(); // 发送请求
};

// 页面加载后立即发起第一次请求
getHeader();

代码解析：

1. 异步模式: req.open("HEAD", url); 中省略了第三个参数，默认为true，表示异步请求。
2. 事件监听: 使用 req.addEventListener("load", reqListener); 替代了同步模式下的直接返回值。load事件在XHR请求成功完成时触发，此时可以在reqListener函数中安全地访问this.getResponseHeader()。
3. 回调函数: reqListener作为一个回调函数，在请求完成后被执行，它负责获取Last-Modified头部并调用compareTimeToNow进行后续处理。
4. 定时器管理: 关键的改进在于将setTimeout(getHeader, 2500)放在了compareTimeToNow函数的else分支中。这意味着只有当前一次请求处理完毕后（即compareTimeToNow被调用），才会设置下一次请求的定时器。这避免了setInterval可能导致的请求重叠问题，确保了每次请求都能独立完成。

解决方案二：推荐方案——使用Fetch API

Fetch API是现代浏览器提供的一种更强大、更灵活的替代XMLHttpRequest的API，它基于Promise，使得异步操作的链式调用和错误处理更加简洁和直观。Fetch API是处理HTTP请求的未来趋势。

以下是使用Fetch API实现相同功能的示例代码：

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的HTTP头部

/**
 * 比较文件最后修改时间与当前时间，并更新UI
 * @param {number} time - 文件最后修改时间的Unix时间戳
 */
const compareTimeToNow = (time) => {
  let d = new Date(); // 当前时间
  let diffSec = Math.round((d - time) / 1000); // 计算时间差（秒）
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新页面显示

  // 特定业务逻辑：如果页面加载超过10秒且文件在5秒内有修改，则刷新页面
  if ((d - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload();
  } else {
    // 请求完成后，设置定时器，等待2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * 发起HTTP HEAD请求获取文件头部信息（通过Fetch API）
 */
const getHeader = () => {
  fetch(url, { method: 'HEAD' }) // 发起HEAD请求
    .then(rsp => {
      // 响应对象rsp的headers属性是一个Headers对象，使用get方法获取指定头部
      compareTimeToNow(new Date(rsp.headers.get(whichHeader)).getTime());
    })
    .catch(error => {
      // 错误处理，例如网络错误或请求失败
      console.error("Fetch request failed:", error);
      // 即使失败，也尝试在2.5秒后再次发起请求，防止死循环
      setTimeout(getHeader, 2500);
    });
};

// 页面加载后立即发起第一次请求
getHeader();

代码解析：

1. 简洁的API: fetch(url) 返回一个Promise，当响应可用时，Promise会被解析为一个Response对象。
2. 获取头部: rsp.headers.get(whichHeader) 是获取HTTP头部信息的推荐方式。rsp.headers是一个Headers对象，提供了get()方法来方便地访问头部。
3. Promise链式调用: .then() 方法用于处理成功的响应，.catch() 方法用于捕获请求或处理过程中发生的错误，使得异步代码的结构更加清晰。
4. 请求类型: 默认情况下，fetch发起的是GET请求。为了模拟HEAD请求（只获取头部，不下载内容），需要额外传递一个配置对象 { method: 'HEAD' }。
5. 浏览器兼容性: Fetch API在现代浏览器中得到了广泛支持（Chrome 42+, Edge 14+, Safari 10.1+, Firefox 39+, Opera 29+），但不支持IE浏览器。对于需要兼容IE的环境，可能仍需使用XMLHttpRequest或引入polyfill。

注意事项与最佳实践

• 异步优先: 始终优先使用异步HTTP请求，避免阻塞主线程，以提供流畅的用户体验。
• 错误处理: 在异步请求中，错误处理至关重要。无论是XHR的onerror事件还是Fetch API的.catch()方法，都应妥善处理网络问题、服务器错误等异常情况。
• 请求频率: 对于需要定期检查文件更新的场景，使用setTimeout在每次请求完成后调度下一次请求，比使用setInterval更安全可靠。这可以防止在网络状况不佳时，请求堆积导致性能问题。
• HEAD请求: 如果只需要获取文件的元信息（如最后修改时间、文件大小等），使用HEAD方法而不是GET方法。HEAD请求只返回HTTP头部，不返回响应体，从而减少了网络传输量，提高了效率。
• 缓存: 浏览器可能会缓存HTTP响应。如果需要确保每次都获取到最新的文件信息，可以考虑在URL中添加一个不重复的查询参数（如时间戳）来绕过缓存，例如Akut.txt?_t=${new Date().getTime()}。

总结

通过将同步XMLHttpRequest转换为异步模式，并更进一步地采用现代的Fetch API，我们不仅消除了浏览器控制台的警告，更重要的是显著提升了Web应用的响应性和用户体验。Fetch API以其基于Promise的简洁语法和强大的功能，正逐渐成为Web开发中处理HTTP请求的首选。在未来的开发中，应积极拥抱这些异步编程范式，构建高性能、用户友好的Web应用程序。

今天关于《异步处理XMLHttpRequest优化网页性能》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！