Question

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

当发送请求时，会创建一个范围，其中的图像元素内部具有与列表中的图像编号对应的id，并且ajax加载gif放置在源中。

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

到目前为止，一切都运行良好，它的速度非常慢。

完整代码：pastebin

我几乎肯定问题正在发生，

        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.3307409286499第二个过程。

profileGetElementByIdforImage0：3ms

即使实际html中的源代码在我点击检查元素时发生了变化，ajax加载gif仍然有点......

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

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

任何见解都将受到赞赏。

Answer 1

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

为了让事情变得更快，我建议在aSync过程中抛出POST请求，这样做的一种天真的方法是：

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

然后，一旦图像返回，只需将其放在任何您想要的地方，这将使用户体验更好，并且不会停止浏览器做其他事情，因为它看起来会非常快。

客户端使用XMLHTTPRequest的性能问题

1 个答案: