优化Web性能：使用异步XHR与Fetch API获取文件修改时间

       <script>
            var pageload = new Date();
            function fetchHeader(url, wch) {
                try {
                    var req=new XMLHttpRequest();
                    req.open("HEAD", url, 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'));
                var d = new Date();
                var diffSec = Math.round((d - time) / 1000);
                document.getElementById("time").innerHTML = Math.trunc(diffSec/60) + " minutes"; // time since it was modified

                if ((d-pageload)/1000 > 10 && diffSec < 5 ){
                    location.reload();
                }
            }, 2500);
        </script>

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

// 比较时间并更新UI的函数
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); 
  }
};

// XHR请求完成时的监听器
function reqListener() {
  // console.log(this.responseText); // HEAD请求通常responseText为空
  // 从响应头获取'Last-Modified'时间，并转换为Date对象，然后传递给compareTimeToNow
  compareTimeToNow(new Date(this.getResponseHeader(whichHeader)).getTime());
}

// 发起HEAD请求的函数
const getHeader = () => {
  const req = new XMLHttpRequest();
  req.addEventListener("load", reqListener); // 监听load事件
  req.open("HEAD", url); // 异步请求，默认第三个参数为true
  req.send();
};

// 首次调用以启动周期性检查
getHeader();

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

// 比较时间并更新UI的函数（与XHR版本相同）
const compareTimeToNow = (time) => {
  let d = new Date();
  let diffSec = Math.round((d - time) / 1000);
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 显示自修改以来的分钟数

  if ((d - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload();
  } else {
    setTimeout(getHeader, 2500); // 周期性调度下一次请求
  }
};

// 发起Fetch请求的函数
const getHeader = () => {
  fetch(url, { method: 'HEAD' }) // 发起HEAD请求
  .then(rsp => {
    // 获取响应头，并转换为时间戳传递给compareTimeToNow
    compareTimeToNow(new Date(rsp.headers.get(whichHeader)).getTime());
  })
  .catch(error => {
    console.error("Fetch请求失败:", error);
    // 失败后也应考虑是否继续调度下一次请求，例如延迟重试
    setTimeout(getHeader, 5000); // 失败后延迟更久重试
  });
};

// 首次调用以启动周期性检查
getHeader();