Chrome执行简单Ajax请求时卡顿问题求助

看起来你的问题根源和Chrome对同步XMLHttpRequest的限制、新主机环境下的请求处理逻辑有关，我来一步步帮你排查解决：

1. 优先处理同步XHR警告（核心卡顿原因） #

Chrome提示的「Synchronous XMLHttpRequest on the main thread is deprecated」是关键——同步请求会阻塞浏览器主线程，直接导致UI卡顿、点击无响应。虽然你在代码里设置了async: true，但大概率是以下情况触发了隐藏的同步请求：

• 检查ajaxrefresh.php或admindt.php返回的HTML内容，是否包含不带async/defer属性的外部脚本标签？这类脚本会强制浏览器同步加载，间接触发同步XHR。
• 有没有在返回的HTML里使用document.write？这种写法在现代浏览器里也会触发同步加载行为。

解决方法：

• 把返回内容中的外部脚本加上async或defer属性，比如：

  <script src="your-script.js" async></script>
  

• 避免使用document.write，改用DOM操作（比如appendChild）插入内容。

2. 修复「Cannot read property 'addEventListener' of undefined」错误 #

这个错误是因为你的Ajax成功回调填充#resultado后，返回HTML中的脚本试图给不存在的DOM元素绑定事件。常见场景：

• 返回的HTML里的脚本假设某个元素一定存在，但实际填充后DOM结构变化，元素未加载完成。
• 脚本在DOM就绪前就执行了。

解决方法：

• 采用事件委托替代直接绑定到内部元素，比如把事件绑定到#resultado容器上：

  // 代替直接给内部元素绑定addEventListener
  $("#resultado").on("click", ".target-element", function() {
    // 你的事件逻辑
  });
  

• 把返回HTML中的脚本放在内容末尾，或者用$(function(){ ... })（jQuery的DOM就绪事件）包裹，确保DOM加载完成后再执行脚本。

3. 优化Ajax请求并发逻辑，避免请求堆积 #

即使你把刷新间隔改成10秒，如果前一个Ajax请求还未完成就发起下一个，会导致请求队列堆积，同样阻塞主线程。

解决方法：添加请求锁，避免并发请求：

let isRefreshing = false; // 全局锁变量
function AutoRefresh(){
  if(isRefreshing) return; // 如果正在请求，直接跳过
  isRefreshing = true;
  
  $.ajax({
    url: '/ajaxrefresh.php',
    type: 'post',
    beforeSend: function () { $("#resultado").html(""); },
    success: function (response) { $("#resultado").html(response); },
    complete: function() { isRefreshing = false; } // 无论成功失败，都释放锁
  });
}

4. 检查新主机的SSL与混合内容问题 #

迁移到HTTPS主机后，若页面中存在HTTP协议的资源（比如图片、脚本），Chrome会拦截这些「混合内容」，导致请求异常或卡顿。

解决方法：

• 打开Chrome调试器的「Console」面板，查看是否有混合内容警告。
• 把所有资源的URL改成HTTPS（或相对路径），确保全站资源都通过SSL加载。

5. 服务器端响应优化（辅助排查） #

虽然你关闭了cURL请求问题仍存在，但可以再确认下：

• 在Chrome调试器的「Network」面板查看ajaxrefresh.php的响应时间，如果响应时间过长（比如超过1秒），即使间隔10秒也会导致主线程阻塞。
• 优化服务器端代码：比如缓存cURL请求的结果，减少重复请求；或者采用异步处理逻辑，避免PHP同步等待外部请求。

内容的提问来源于stack exchange，提问作者Pedro Jose Otero Rodriguez