Ajax 请求阻塞浏览器的原因与解决方案-php教程-PHP中文网

Ajax 请求阻塞浏览器的原因与解决方案

本文解析为何长耗时 ajax 请求会导致当前 chrome 会话完全卡顿、页面无法交互，并提供基于 promise 的非阻塞式异步处理方案，确保 ui 响应性不受后端慢请求影响。

本文解析为何长耗时 ajax 请求会导致当前 chrome 会话完全卡顿、页面无法交互，并提供基于 promise 的非阻塞式异步处理方案，确保 ui 响应性不受后端慢请求影响。

你遇到的现象——“Ajax 请求执行期间整个网站在当前 Chrome 标签页中完全无响应（空白、无法跳转、按钮失灵）”，并非 Ajax 本身阻塞了浏览器渲染线程，而是由一个常被忽视的底层机制导致：PHP 默认的 Session 文件锁（Session File Locking）。

当你的 /controller.php 启用了 session_start()（例如用于用户登录态、CSRF token 或临时缓存），PHP 会以独占方式打开并锁定对应的 session 文件（如 /tmp/sess_xxx）。而同一浏览器会话（同域、同 Cookie）的所有后续 HTTP 请求（包括其他页面加载、AJAX、图片请求等）都会因等待该锁释放而排队阻塞——这就是为什么只有「当前 Chrome 窗口/标签页」卡死，而手机或其他浏览器窗口完全正常的原因。

⚠️ 注意：这不是 jQuery 或 Ajax 的 Bug，也不是前端代码写法问题；而是 PHP 服务端默认行为与浏览器同源会话复用机制共同导致的典型瓶颈。

✅ 正确解决方案：释放 Session 锁

在 /controller.php 开头，一旦完成 session 数据读取，立即调用 session_write_close()：

<?php session_start();

// ✅ 立即释放 session 文件锁，允许其他请求并发执行
if (isset($_SESSION['user_id'])) {
    $userId = $_SESSION['user_id'];
}
session_write_close(); // ? 关键！必须在此处调用

// 后续业务逻辑（如 cURL 请求）可安全执行，不再阻塞其他请求
$action = $_GET['action'] ?? '';
if ($action === 'loadPageContent') {
    // 模拟耗时操作（如多路 cURL）
    $htmlDatas = file_get_contents('https://example.com/api/data'); // 替换为实际逻辑
    $date_scrapping = date('c');

    echo json_encode([
        'status' => true,
        'htmlDatas' => $htmlDatas,
        'date_scrapping' => $date_scrapping
    ]);
}

? 前端优化：使用 Promise 封装，提升可维护性（非必需但推荐）

虽然释放 session 锁已解决根本问题，但将 Ajax 封装为 Promise 可显著增强代码可读性与错误处理能力，并天然支持 async/await：

function ajaxCall() {
  return new Promise((resolve) => {
    $.ajax({
      url: '/controller.php',
      type: 'GET',
      dataType: 'json',
      data: { action: 'loadPageContent' },
      success: function (retour) {
        localStorage.removeItem('myhtml');
        if (retour.status && retour.htmlDatas) {
          storedDatas.posts = retour.htmlDatas;
          storedDatas.date_scrapping = retour.date_scrapping;
          localStorage.setItem('myhtml', JSON.stringify(storedDatas));

          $('#container').html(retour.htmlDatas);
          resolve(true);
        } else {
          alert('数据加载失败');
          resolve(false);
        }
      },
      error: function () {
        alert('网络请求异常');
        resolve(false);
      }
    });
  });
}

// 使用示例（可与其他逻辑并行执行）
async function loadContent() {
  // 显示加载状态（提升用户体验）
  $('#container').html('<div class="loading">加载中...</div>');

  const success = await ajaxCall();
  if (!success) {
    $('#container').html('<div class="error">加载失败，请重试</div>');
  }
}