JavaScript异步优化技巧：文件监控与刷新方法

本文深入探讨了JavaScript异步优化的重要性，针对同步XMLHttpRequest（XHR）可能导致的页面卡顿和浏览器警告，提出了有效的解决方案。通过将同步请求转换为异步操作，利用XMLHttpRequest和Fetch API两种方式，实现了非阻塞的文件最后修改时间获取，并根据时间差智能刷新页面。重点介绍了如何通过异步XHR和Fetch API实现文件监控，避免主线程阻塞，提升用户体验。同时，详细解析了两种方案的代码实现、注意事项以及错误处理机制，为Web开发者提供了一份实用的JavaScript异步优化指南，助力打造更流畅、更高效的Web应用。无论选择哪种方案，异步化是提升Web应用性能的关键。

在Web开发中，与服务器进行数据交互是常见的需求。然而，不当的请求方式，特别是同步XMLHttpRequest（XHR），可能导致严重的用户体验问题。当JavaScript主线程执行同步XHR请求时，它会暂停所有其他任务，直到服务器响应为止。这会导致页面冻结、响应迟缓，并可能触发浏览器警告：“Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.”。本文将详细介绍如何将获取文件最后修改时间的同步请求转换为异步操作，并提供两种现代的解决方案：异步XMLHttpRequest和Fetch API。

1. 同步XMLHttpRequest的问题解析

在原始代码中，获取文件最后修改时间的功能是通过一个同步XHR请求实现的：

function fetchHeader(url, wch) {
    try {
        var req = new XMLHttpRequest();
        req.open("HEAD", url, false); // 这里的 'false' 标志着同步请求
        req.send(null);
        if (req.status == 200) {
            return req.getResponseHeader(wch);
        } else return false;
    } catch (er) {
        return er.message;
    }
}

window.setInterval(function() {
    var time = Date.parse(fetchHeader("Akut.txt", 'Last-Modified'));
    // ... 后续处理
}, 2500);

req.open("HEAD", url, false) 中的第三个参数 false 明确指示这是一个同步请求。这意味着 req.send(null) 调用会阻塞主线程，直到请求完成并接收到响应。在一个定时器 setInterval 中频繁执行这样的操作（例如每2.5秒一次），会持续占用CPU资源，导致页面卡顿，尤其当同时打开多个使用此代码的窗口时，问题会更加明显。

为了解决这个问题，我们需要将请求改为异步方式，确保请求在后台执行，不阻塞用户界面。

2. 异步XMLHttpRequest实现

异步XHR的核心在于将请求的发送与响应的处理分离。通过注册事件监听器，我们可以在请求状态发生变化时执行相应的回调函数。

以下是使用异步XMLHttpRequest重构后的代码示例：

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

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

  // 判断是否需要刷新页面：页面加载超过10秒且文件在5秒内被修改过
  if ((currentTime - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload(); // 刷新页面
  } else {
    // 如果不需要刷新，则在2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * 处理XMLHttpRequest的加载完成事件
 * 当请求成功加载并接收到响应时调用
 */
function reqListener() {
  // 从响应头中获取 'Last-Modified' 时间，并转换为毫秒数
  const lastModified = new Date(this.getResponseHeader(whichHeader)).getTime();
  compareTimeToNow(lastModified); // 调用比较函数
}

/**
 * 发起HEAD请求获取文件头部信息
 */
const getHeader = () => {
  const req = new XMLHttpRequest();
  // 注册 'load' 事件监听器，当请求成功完成时触发 reqListener
  req.addEventListener("load", reqListener);
  // 打开HEAD请求，默认是异步请求 (第三个参数省略或为true)
  req.open("HEAD", url);
  req.send(); // 发送请求
};

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

代码解析与注意事项：

1. 异步模式： req.open("HEAD", url) 默认就是异步的，无需再传入 true。
2. 事件监听： 使用 req.addEventListener("load", reqListener) 替代了 onreadystatechange。load 事件在请求成功完成时触发，通常比 onreadystatechange 更简洁明了。
3. 回调函数： reqListener 函数作为回调，在请求完成后被调用，此时可以安全地访问 this.getResponseHeader(whichHeader) 来获取响应头信息。
4. 链式调用： 为了实现定时刷新，我们将 setTimeout(getHeader, 2500) 放在了 compareTimeToNow 函数的末尾。这意味着只有在当前请求处理完毕后，才会安排下一次请求，这比简单的 setInterval 更健壮，可以避免请求堆积和竞态条件。
5. 错误处理： 虽然示例中未显式包含，但在实际应用中，应添加错误处理机制，例如监听 error 事件或检查 req.status，以应对网络问题或服务器错误。

3. 使用Fetch API实现

Fetch API是现代浏览器提供的一种更强大、更灵活的替代XMLHttpRequest的API，它基于Promise，使得异步操作的链式处理更加简洁。

以下是使用Fetch API重构后的代码示例：

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

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

  // 判断是否需要刷新页面：页面加载超过10秒且文件在5秒内被修改过
  if ((currentTime - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload(); // 刷新页面
  } else {
    // 如果不需要刷新，则在2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * 发起HEAD请求获取文件头部信息
 */
const getHeader = () => {
  fetch(url, { method: 'HEAD' }) // 使用Fetch API发起HEAD请求
    .then(response => {
      // 检查响应是否成功 (status 200-299)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      // 从响应头中获取 'Last-Modified' 时间，并转换为毫秒数
      const lastModified = new Date(response.headers.get(whichHeader)).getTime();
      return lastModified;
    })
    .then(lastModified => compareTimeToNow(lastModified)) // 将获取到的时间传递给比较函数
    .catch(error => {
      console.error("Error fetching header:", error);
      // 错误处理：例如，可以停止定时器或重试
      setTimeout(getHeader, 2500); // 错误时也尝试在2.5秒后重试
    });
};

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

代码解析与注意事项：

1. 简洁语法： Fetch API 使用 .then() 链式调用处理响应，语法更现代、更易读。
2. fetch(url, { method: 'HEAD' })： 指定请求方法为 HEAD。默认的 fetch(url) 是 GET 请求，会下载整个文件体，而 HEAD 请求只获取响应头，更高效。
3. Promise-based： fetch 返回一个 Promise。第一个 .then() 接收 Response 对象，通过 response.headers.get(whichHeader) 获取指定头信息。
4. 错误处理： fetch 请求在网络错误或非2xx状态码时不会自动进入 catch 块。需要手动检查 response.ok 属性，并在不符合预期时 throw new Error()，才能被 .catch() 捕获。
5. 浏览器兼容性： Fetch API 在现代浏览器中得到广泛支持（Chrome 42+, Edge 14+, Safari 10.1+, Firefox 39+, Opera 29+），但不支持IE浏览器。如果需要支持IE，则应使用异步XMLHttpRequest或引入Polyfill。

总结

将同步XMLHttpRequest请求转换为异步操作是优化Web应用性能和用户体验的关键一步。无论是采用传统的异步XMLHttpRequest还是现代的Fetch API，核心思想都是避免阻塞浏览器主线程。

• 异步XHR 通过事件监听器（如load或readystatechange）在后台处理请求，并在请求完成后通过回调函数处理响应。
• Fetch API 提供了一种更简洁、基于Promise的异步请求方式，语法更现代，错误处理也更统一。

在实际应用中，应根据项目需求和目标浏览器的兼容性选择合适的方案。通过异步化文件修改时间监控，我们不仅消除了烦人的弃用警告，更重要的是，显著提升了Web应用的响应速度和用户友好性。

本篇关于《JavaScript异步优化技巧：文件监控与刷新方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！