Javascript 使用XMLHTTPRequest的客户端出现性能问题

我只是在玩弄一个为图像设计的简单的多重上传表单。我目前正在研究的是一个多上传表单，它在用户提交表单之前发送一个AJAX请求。PHP脚本只是将文件保存到服务器并调整图像大小

当发送请求时，将创建一个span，其中包含一个image元素，该元素的id与列表中的图像编号相对应，并在源中放置一个ajax加载gif

当响应返回时，我根据元素的id获取元素，并用保存在服务器上的图像替换源

到目前为止一切都很好，只是速度非常慢

完整代码如下：

我几乎可以肯定问题正在发生

        xmlHTTP.onreadystatechange = function(){
            if( xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
                var jsonResponse = JSON.parse(xmlHTTP.responseText);
                
                var actualNumber = jsonResponse.imageNumber-1;
                
                console.log("Image #" + jsonResponse.imageNumber + " Took " + jsonResponse.scriptTime + " to process.");
                console.time('profileGetElementByIdforImage'+actualNumber);
                document.getElementById("preview"+actualNumber).setAttribute("src", jsonResponse.fullPath);
                console.timeEnd('profileGetElementByIdforImage'+actualNumber);
            }
            
        };

奇怪的是，如果我把这个从本地机器上取下并上传到我的服务器上，它需要更长的时间，即使PHP脚本的时间要短得多

我会得到这样的东西：

图像#1的处理耗时6.330709286499秒

profileGetElementByIdforImage0:3ms

即使当我点击查看元素时，实际html中的源代码已经改变，ajax加载gif仍然会保留一段时间

我认为这可能与浏览器必须调整图像有关，因此我在php脚本中添加了一个“缩略图”功能。但是客户端的时间和我使用全尺寸图像时一样长

现在我想知道，这和服务器的请求有什么关系吗？或者这是一个DOM问题

---

如果您有任何见解，我们将不胜感激。

PHP图像解析，尤其是调整图像大小需要花费相当长的时间，尤其是如果图像非常大的话。因此，如果发送POST请求需要6秒的时间，请调整大小并返回非常好的图像

为了加快速度，我建议在异步进程中抛出POST请求，一种简单的方法是：

window.setTimeout(function(){
  //POST Request
},1);

---

然后，一旦图像返回，只需将其放在您想要的地方，这将使用户体验更好，并且不会停止浏览器执行其他操作，因此看起来速度相当快。

hm。。谢谢，但是post请求已经异步运行了。图像不会按发送顺序返回。问题似乎是，一旦图像返回，还有15秒或更长的等待时间，即使图像源已在DOM中更改。嗯，非常奇怪。你试过在chrome开发工具中检查时间线吗？