XMLHttpRequest.load 和 XMLHttpRequest.onreadystatechange 事件之间的延迟答案

【问题标题】：Delay between XMLHttpRequest.load and XMLHttpRequest.onreadystatechange eventsXMLHttpRequest.load 和 XMLHttpRequest.onreadystatechange 事件之间的延迟
【发布时间】：2019-10-26 22:03:23
【问题描述】：

下面的代码经历了 40 秒。在load 事件的发生之间延迟，这表明一个10MB 的formdata 已发送到服务器和onreadystatechange 事件，表明已收到来自服务器的一些响应.

function SendData(formdata) {
    var xhr = new XMLHttpRequest();


    xhr.upload.addEventListener("load", function(e) {
        console.log('Finished Transmitting Formdata to Server');
    }, false);

    xhr.onreadystatechange = function(e)    
    {
         console.log('XHR State Changed');

         if ( (xhr.readyState == 4) && (xhr.status == 200) )
            console.log('Server Replied with Success');
    }

    xhr.open("POST", "receive.php");
    xhr.send(formdata);
}

receive.php 文件仅包含：

<?php
   echo 'Formdata received Successfully';
?>

问：造成如此长的延迟的原因是什么 - 为什么控制台会在高达 40 秒的时间内记录 'XHR State Changed' 消息。在记录'Finished Transmitting Formdata to Server' 消息后，...以及找出此延迟的确切原因的正确故障排除步骤是什么？

延迟发生在xhr.readyState == 2 之前，也就是HEADERS_RECEIVED 之前。

Chrome 的 DeveloperTools 的 Network 选项卡为 receive.php 显示以下内容（类型：xhr）：

Queueing:         2.08ms
Stalled:          0.62ms
Request sent:     894ms
Waiting (TTFB):   41.27s
Content Download: 0.69ms

P.S.
PHP 版本：7.1.33
Apache/N-G-I-N-X-htaccess-support
FreeBSD 11.3-RELEASE-p3

【问题讨论】：

好吧，如果连接速度不是很快，或者服务器没有太多带宽，那么 10MB 是一个不错的传输量。尝试将请求/响应分解为多个步骤。有数据的发送。然后服务器必须处理它。然后它必须返回一个响应。如果服务器所做的只是回显，那么认为延迟是由于数据量造成的似乎是合理的。您的浏览器的网络工具可以帮助您分解它 - Chrome 中的工具可以为您提供详细的时间分解 - 发送时间、等待响应的时间以及下载响应的时间
@ADyson：您是否建议在将数据发送到服务器之前触发xhr.load 事件？
TBH 我不确定。这就是您需要使用这些工具的原因。查看您的网络工具可能会帮助您排除这种可能性。特别是如果您让控制台记录上传开始的确切时间以及事件发生的时间，以便您进行比较。而且您还可以查看服务器是否有很长的等待时间来响应。在 Chrome 的开发工具中，转到 Network 部分，单击您的 ajax 请求，然后单击该请求的“Timing”选项卡。
P.S.以下是解释计时选项卡该部分中每个阶段含义的文档：developers.google.com/web/tools/chrome-devtools/network/…
@ADyson：我通过 Wireshark 验证，load 事件仅在 10.2MB 通过网络传输之后才被触发......所以剩下的问题仍然存在：“ 为什么服务器需要这么长时间来处理 10MB 的数据？”。我怎样才能知道它是对接收到的数据进行病毒扫描，还是在进行其他不需要的处理？

标签： javascript php ajax apache

【解决方案1】：

延迟是由 Apache 的“Web 应用程序防火墙”模块（也称为“WAF”）引起的。禁用此模块会立即消除延迟。

【讨论】：