客戶端使用XMLHTTPRequest時的性能問題

我只是爲圖像設計一個簡單的多個上傳表單。目前我正在處理的是多個上傳表單，它在用戶提交表單之前發送AJAX請求。 PHP腳本只是將文件保存到服務器並調整圖像大小。客戶端使用XMLHTTPRequest時的性能問題

發送請求時，會創建一個跨度，其中包含一個圖像元素，其中的圖像元素對應於列表中的圖像編號，並且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 secondsto過程。

profileGetElementByIdforImage0：3ms的

而且即使實際的HTML內源已經改變，當我點擊檢查元素，阿賈克斯加載GIF仍然是一個有點...

我想它可能與瀏覽器必須調整圖像有關，所以我在php腳本中添加了「縮略圖」功能。但客戶端的使用時間與我使用全尺寸圖像時一樣長。

所以現在我想知道，這是否與來自服務器的請求有任何關係？或者這是一個DOM問題？

任何有識之士將不勝感激。

來源

2013-03-19 Dave

PHP圖像解析和尤其是調整大小需要相當長的一段時間，特別是如果圖像相當大。因此，如果發送POST請求花費的時間是6秒，請調整大小並返回非常好的圖像。

爲了讓事情有點快，我建議拋出POST請求的異步處理這樣做將是一個天真的方式：

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

然後，一旦圖像回來簡單地把它放在任何你想要這樣做會讓用戶體驗更好，並且不會阻止瀏覽器執行其他操作，因此它看起來非常快。

來源

2013-03-21 00:22:21

嗯..謝謝，但發佈的請求已經異步運行。圖像不會按照它們發送的順序返回。這個問題似乎是一旦圖像恢復正常，還有15秒或更長時間的等待，即使DOM中的圖像源已被更改。 – Dave 2013-03-21 07:53:52

嗯很奇怪。你有沒有試過在chrome開發工具中檢查時間表？ – 2013-03-21 09:53:02

客戶端使用XMLHTTPRequest時的性能問題

回答

相關問題