异步JavaScript文件加载pending时SignalR connect调用被阻塞问题咨询

问题原因 #

1. 浏览器并发连接配额被挂起的GTM请求占用 #

虽然GTM的脚本加了async属性不会阻塞DOM解析，但被企业网络拦截的GTM请求会长期处于pending状态，占用浏览器对同一域名的并发连接配额（现代浏览器默认单域名最多6个并发请求）。此时SignalR的连接请求会进入队列等待，直到GTM请求超时释放连接，才能发起请求，导致连接延迟。

2. 核心脚本依赖GTM加载导致初始化阻塞 #

如果项目中jQuery、SignalR客户端脚本是通过GTM动态注入加载的，那么GTM请求超时会直接导致这些核心脚本无法加载，绑定在jQuery ready事件上的SignalR初始化逻辑永远不会执行，按钮始终处于禁用状态。

3. 服务端ASP.NET会话锁阻塞SignalR请求 #

即便SignalR Hub没有操作Session，只要.NET Framework应用全局开启了默认的会话状态，所有进入ASP.NET管道的请求（包括SignalR连接请求）都会触发同会话的排他锁机制。如果同一用户会话下还有其他未处理完成的请求，SignalR的连接请求会被阻塞，直到会话锁被释放。

可行解决方案 #

1. 解除服务端会话锁 #

在Web.config中对SignalR路径单独禁用会话状态，避免会话锁阻塞连接：

<configuration>
  <!-- 其他原有配置 -->
  <location path="你的SignalR路径前缀/signalr">
    <system.web>
      <sessionState mode="Off" />
      <pages enableSessionState="false" />
    </system.web>
  </location>
</configuration>

将路径中的你的SignalR路径前缀替换为客户端代码中window.location.pathname.split("/")[1]对应的路径段即可。

2. 优化GTM加载逻辑 #

• 将GTM脚本从<head>移到</body>标签之前加载，或使用defer属性替代async，保证核心功能初始化完成后再加载GTM。
• 新增GTM加载超时逻辑，超过阈值未加载完成则自动取消请求、释放连接配额：

// 放置在GTM引入代码之前
const gtmScript = document.querySelector('script[src*="googletagmanager.com"]');
const gtmTimeout = setTimeout(() => {
  if (gtmScript && gtmScript.readyState !== 'complete') {
    gtmScript.remove();
    window.gtmBlocked = true;
  }
}, 3000);
gtmScript.onload = gtmScript.onerror = () => clearTimeout(gtmTimeout);

3. 调整SignalR初始化逻辑 #

• 确保jQuery、SignalR客户端脚本为页面直接引入，不通过GTM动态加载，避免被GTM阻塞。
• 将SignalR初始化逻辑从jQuery ready事件中移出，直接放在页面底部独立执行，不需要等待DOM完全加载：

// 直接放在页面底部，无需包裹$(function(){})
AsyncCalc.setupSignalR();

4. 新增连接超时兜底 #

给SignalR连接增加超时逻辑，超过指定时间未连接成功则临时启用按钮，避免功能完全不可用：

_start: function () {
  AsyncCalc.connection.url = "/" + window.location.pathname.split("/")[1] + "/signalr";
  // 新增5秒超时兜底
  const connectTimeout = setTimeout(() => {
    if (!AsyncCalc.connected) {
      $(".async").removeClass("disabled");
      // 可选：点击按钮时重试连接
      $(".async").one('click', () => {
        if (!AsyncCalc.connected) AsyncCalc._start();
      });
    }
  }, 5000);
  AsyncCalc.connection.start().done(function () {
    clearTimeout(connectTimeout);
    AsyncCalc.connected = true;
    AsyncCalc.collectiefHub.invoke("joinGroup", AsyncCalc.group);
    $(".async").removeClass("disabled");
  });
}

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