直连无互联网时Vue2响应式网站延迟严重，求技术排查方案

1. 网络层TCP/链路参数排查 #

• 抓包对比直连与交换机场景的流量：
  • 在设备端执行tcpdump -i [控制接口] host [电脑IP] and port [API端口]，或在电脑端用Wireshark抓包，重点观察Vue轮询请求的发起时间、设备响应时间、是否有丢包/重传/TCP窗口阻塞。因为新标签页请求正常，说明API服务本身无问题，需确认Vue发起的请求是否在传输层被延迟。
• 检查MTU匹配性：
  • 设备端用ifconfig查看控制接口MTU，电脑端用netsh interface ipv4 show subinterfaces查看对应网卡MTU。若两端MTU不一致（比如设备1500、电脑1492），尝试统一设置为1400测试，避免分片导致的延迟。
• 验证ARP缓存状态：
  • 直连时，电脑端执行arp -d [设备IP]、设备端执行ip neigh flush all清空ARP缓存，重新连接后测试UI延迟是否消失，排除ARP表项异常导致的地址解析延迟。
• 强制网卡协商参数：
  • 直连时可能存在网卡自动协商失败，将设备和电脑的控制网卡强制设置为100Mbps全双工：设备端执行ethtool -s [控制接口] speed 100 duplex full autoneg off，电脑端在网卡属性中对应设置后测试。

2. 浏览器请求与缓存排查 #

• 分析DevTools Network面板：
  • 打开浏览器DevTools的Network标签，过滤Vue轮询的API请求，查看请求状态：是处于pending等待响应，还是响应已返回但UI未更新？同时确认轮询间隔是否严格为1秒，是否被浏览器节流。
• 禁用HTTP缓存测试：
  • 在DevTools中勾选Disable cache，或给轮询请求URL添加随机参数（如/api/status?_t=${Date.now()}），避免浏览器缓存旧状态导致UI不更新。
• 检查并发请求限制：
  • 查看Network面板中是否有其他pending请求占用了同一域名的并发连接池（Chrome默认6个），若有，排查Vue应用中是否存在未关闭的长连接或异常请求。

3. Vue应用状态更新逻辑排查 #

• 验证响应处理与响应式触发：
  • 在轮询请求的响应回调中添加console.log，打印拿到的状态数据和当前时间，确认是否及时获取到了正确的设备状态。同时检查是否正确修改了Vuedata中的响应式变量，而非未被监听的普通变量。
• 调整轮询实现方式：
  • 若当前用setInterval发起轮询，改为setTimeout递归调用（请求完成后再发起下一次），避免前一次请求阻塞导致的定时器延迟。示例：

    function pollStatus() {
      axios.get('/api/status')
        .then(res => {
          // 更新状态逻辑
          setTimeout(pollStatus, 1000);
        })
        .catch(err => {
          setTimeout(pollStatus, 1000);
        });
    }
    

• 测试强制UI更新：
  • 在拿到正确状态后，手动调用this.$forceUpdate()（Vue组件内），排除响应式更新被合并或遗漏的可能。

4. 设备端API服务与系统负载排查 #

• 监控系统资源占用：
  • 设备端执行htop或top，查看CPU、内存使用率，对比直连与交换机场景下的负载差异。若传感器升级后CPU占用过高，可能导致API服务优先处理传感器请求，延迟响应轮询。
• 调整API服务连接策略：
  • 在Vue的轮询请求中添加Connection: close请求头，禁用TCP连接复用，测试是否解决延迟，排除异常长连接导致的请求阻塞。
• 检查接口流量优先级：
  • 传感器与控制应用在独立接口，用tcpdump -i [传感器接口]查看是否有大量广播/组播流量占用带宽，影响控制接口的请求传输。必要时用tc命令给控制接口设置流量优先级。

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