主线程同步XMLHttpRequest已弃用警告排查求助

问题分析 #

你的警告来自jQuery内部的XHR调用，虽然load()默认是异步请求，但可能存在以下触发同步请求的场景：

• 旧版本jQuery的潜在bug，导致async参数被意外设为false
• 全局AJAX配置被修改（比如$.ajaxSetup({async: false})），影响了load()的默认行为
• 页面卸载阶段的隐性同步请求（不过你的代码是DOM就绪时执行，这种概率极低）

解决方案 #

方案1：改用原生Fetch API替代jQuery.load() #

完全脱离jQuery的AJAX逻辑，用标准异步API实现加载，彻底避免同步XHR问题：

修改header-footer.js为：

// 通用加载函数：加载HTML片段并插入指定元素
function loadHtml(url, targetId) {
  fetch(url)
    .then(res => {
      if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
      return res.text();
    })
    .then(html => {
      document.getElementById(targetId).innerHTML = html;
    })
    .catch(err => console.error(`加载${url}失败:`, err));
}

// DOM就绪后执行加载
document.addEventListener('DOMContentLoaded', () => {
  loadHtml('/header.html', 'header');
  loadHtml('/footer.html', 'footer');
});

方案2：保留jQuery，但显式配置异步AJAX请求 #

如果不想放弃jQuery，显式使用$.ajax()并强制设置async: true，覆盖任何可能的全局配置：

修改header-footer.js为：

$(function() {
  // 加载页眉
  $.ajax({
    url: '/header.html',
    async: true, // 明确指定异步，确保不被全局配置影响
    success: function(html) {
      $('#header').html(html);
    }
  });

  // 加载页脚
  $.ajax({
    url: '/footer.html',
    async: true,
    success: function(html) {
      $('#footer').html(html);
    }
  });
});

额外检查项 #

• 检查全局AJAX配置：搜索项目中是否有$.ajaxSetup()代码，如果存在async: false的设置，立即移除，这会导致所有jQuery AJAX请求变为同步。
• 升级jQuery版本：如果使用的是1.x或2.x的老旧版本，升级到最新的3.x稳定版，旧版本存在一些已修复的AJAX相关bug。

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