Question

我们正在开发一个使用XMLHttpRequest的应用程序，通过拖放支持上传文件。我们正在使用jQuery插件，但这不是问题。

我们的测试人员报告说，在localhost上传文件需要花费大量时间，因为他基本上是通过浏览器将文件发送到自己的机器上。 20 MB文件上传大约30秒（！）。

我被分配调查问题，我发现有问题的是XMLHttpRequest。当我强制使用后备机制（iframe，有效但没有进度条支持）时，我们的测试人员上传的文件不到一秒钟。

我写了一个简单的测试脚本，看看这笔交易是什么（它非常强大，非常快，又脏，不评判我）

# var file was leaked from our jquery uploader, it's basically input.files[0] where input = <input type="file">
average = 0; 
averages = []; 
previous = 0; 
previous_time = 0; 

x = new XMLHttpRequest;
x.open("POST", "/something/accept_file?upload_param_name=file", true);

x.upload.onprogress = function(e) { 
    now = e.loaded; 
    now_time = Date.now(); 
    diff = now - previous; 
    diff_time = now_time - previous_time; 
    console.log("speed", (diff / diff_time)); 
    averages.push((diff / diff_time)); 
    previous = now; 
    previous_time = now_time; 
}

x.onreadystatechange = function() { 
    if (x.readyState == 4) { 
        for(i=0, l=averages.length; i < l; i++) { 
            average += averages[i] 
        } 
        console.log("AVG SPEED: ", average/averages.length) 
    } 
}

x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
x.setRequestHeader("X-File-Name", "test");
x.setRequestHeader("Content-Type", "application/octet-stream");
x.send(file);

将文件上传到同一台服务器的平均速度： 488.3 KB / s
将文件上传到远程服务器的平均速度： 801.7 KB / s （考虑到我们的办公室互联网连接，这听起来很合适）

现在我的问题是：为什么带有二进制文件的XMLHttpRequest如此之慢？我认为它通过我们所有的网络发送文件，因此它再次通过我们的路由器，但在任务中的网络部分管理员没有注册任何网络活动峰值（虽然上传到远程服务器时也是如此）或者我做错了。

编辑正如我所看到的，任何关键词“jQuery插件”的提及都会让人误以为是：

x = new XMLHttpRequest;
x.open("POST", "/something/accept_file?upload_param_name=file", true);
x.send(file);

这足以触发问题（缓慢上传）。没有jQuery，没有花哨的回调和进度条，没有分块 - 三行代码。

为什么XMLHttpRequest在localhost上这么慢

0 个答案: