0

画像用に設計された単純な複数アップロードフォームをいじっています。私が現在取り組んでいるのは、ユーザーがフォームを送信する前に 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の問題ですか？

任意の洞察をいただければ幸いです。

4

1 に答える 1

0

特に画像が非常に大きい場合、PHP 画像の解析、特にサイズ変更にはかなりの時間がかかります。したがって、POST 要求の送信にかかった時間が 6 秒である場合、サイズを変更して、非常に良好な画像を返します。

物事を少し速くするために、aSyncプロセスでPOSTリクエストをスローすることをお勧めします。これを行う単純な方法は次のとおりです。

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

次に、画像が戻ってきたら、好きな場所に配置するだけで、ユーザーエクスペリエンスが向上し、ブラウザーが他のことをするのを止めることはありません。そのため、非常に高速に見えます.

于 2013-03-21T00:22:21.067 に答える