ドラッグ アンド ドロップをサポートするファイルのアップロードに XMLHttpRequest を使用するアプリケーションを開発しています。そのために jQuery プラグインを使用していますが、ここでは問題ではありません。
私たちのテスターは、基本的にブラウザーを介して自分のマシンにファイルを送信していることを考えると、ローカルホストにファイルをアップロードするにはかなりの時間がかかると報告しています。20 MB のファイルが約 30 秒 (!) アップロードされていました。
問題の調査を担当したところ、問題の原因は XMLHttpRequest であることがわかりました。フォールバック メカニズム (iframe、動作しますが、進行状況バーのサポートはありません) を強制すると、テスターがアップロードしていた同じファイルに 1 秒もかかりませんでした。
私は簡単なテスト スクリプトを作成して、取引内容を確認しました (非常に迅速で汚いので、判断しないでください)。
# 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/秒
- ファイルをリモート サーバーにアップロードする平均速度: 801.7 KB/秒(オフィスのインターネット接続を考慮すると、これは適切に聞こえます)
ここで私の質問は、バイナリ ファイルを含む XMLHttpRequest が非常に遅いのはなぜですか? ファイルがすべてのネットワークを介して送信されるため、ルーターを再度通過するように見えますが、タスクマネージャーのネットワークセクションはネットワークアクティビティのスパイクを記録しませんでした（ただし、リモートサーバーへのアップロード時に記録されました）または私はやっています何か問題でも。
編集:私が見るように、「jQueryプラグイン」というキーワードについて言及すると、人々は間違った言葉で考えてしまいます。
x = new XMLHttpRequest;
x.open("POST", "/something/accept_file?upload_param_name=file", true);
x.send(file);
これは、問題を引き起こすのに十分です (遅いアップロード)。jQuery も、派手なコールバックやプログレス バーも、チャンクもありません - 3 行のコードです。