鼠标悬停触发jQuery.get加载数据时出现主线程同步XMLHttpRequest弃用警告

嘿，我来帮你搞清楚这个警告的来龙去脉！

首先，你写的$.get('/myPage', ...)本身是异步请求（jQuery的$.get默认就是异步的），所以这个请求本身不会触发警告。那问题出在哪呢？

警告的根源 #

当你把/myPage返回的data插入到#elem中时，返回的HTML内容里包含了同步的XMLHttpRequest代码——比如原生XHR用了xhr.open('GET', url, false)（第三个参数false表示同步），或者jQuery的AJAX设置了async: false。这些同步请求会阻塞主线程，导致页面卡顿，所以浏览器才会抛出这个 deprecation 警告。而你只在控制台打印data时，这些脚本不会被执行，自然就没警告啦。

解决方案 #

1. 修复/myPage中的同步请求代码

这是最根本的解决办法，把所有同步AJAX改成异步模式：

• 原生XHR修改：
  把同步请求：

  // 错误的同步写法
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/some-api', false);
  xhr.send();
  if (xhr.status === 200) {
    // 处理数据
  }
  

  改成异步：

  // 正确的异步写法
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/some-api', true); // 第三个参数设为true（默认也是true）
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 处理数据
    }
  };
  xhr.send();
  

• jQuery AJAX修改：
  把带async: false的同步请求：

  // 错误的同步写法
  $.ajax({
    url: '/some-api',
    async: false,
    success: function(res) {
      // 处理数据
    }
  });
  

  改成默认的异步请求（直接去掉async: false即可，jQuery默认async: true）：

  // 正确的异步写法
  $.get('/some-api', function(res) {
    // 处理数据
  });
  

2. （不推荐）过滤插入内容中的同步脚本

如果暂时无法修改/myPage的内容，可以在插入DOM前过滤掉里面的同步脚本，但这可能会破坏页面功能，所以仅作为临时方案：

$('#myButton').on('mouseover', function() {
  $.get('/myPage', function(data){
    // 移除包含同步XHR的脚本（示例，需根据实际情况调整）
    const filteredData = $(data).find('script').filter(function() {
      return !$(this).text().includes('async: false') && !$(this).text().includes('open(', ', false)');
    }).remove().end().html();
    $('#elem').html(filteredData);
  });
});

总结 #

核心问题不是你写的mouseover事件里的请求，而是加载进来的页面内容里的同步XHR代码。只要把这些同步请求改成异步，警告就会消失，同时页面的用户体验也会更好～

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