Как я могу ускорить этот код для загрузки файла на веб-сервер? - PullRequest
Новая
       4

Как я могу ускорить этот код для загрузки файла на веб-сервер?

0 голосов
/ 07 мая 2020

Я предполагаю, что большинство узких мест в производительности при загрузке файла на веб-сервер будут связаны со скоростью сетевого соединения и веб-сервера. Однако кто-нибудь видит какие-либо изменения, которые я должен внести в этот javascript для ускорения процесса загрузки файла на веб-сервер? 

<!DOCTYPE html>
<html>
<head> 
   <title>Test Upload Speed</title>
   <meta name="robots" content="noindex, nofollow" />
</head>
<body>
    <form id='uploadForm' method="post" enctype="multipart/form-data" action="testUploadSpeed.html" >
        <input type='file' name='bigFile' />
        <br />
        <input type='submit' value='submit' />
    </form>
    <p id='uploadStatus'></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
        var uploadStatus = document.getElementById( 'uploadStatus' );
        var uploadButton = document.getElementById( 'uploadButton' );
        var uploadForm = document.getElementById( 'uploadForm' );
        var totalFileSize = 0;
        var startTime ;
        uploadForm.onsubmit = function(event) {
             event.preventDefault();
             startTime = performance.now();
             uploadStatus.innerHTML = 'Uploading...';
             var formData = new FormData( uploadForm );
             var urlString = "testUploadSpeed.html" ;
             $.ajax( { url: urlString,
                       type: "POST",
                       data: formData,
                       processData: false,
                       contentType: false,
                       cache: false,
                       success: function( data, status, xhr ) {
                                var elapsed = performance.now() - startTime ;
                                uploadStatus.innerHTML = 'Upload complete. ' + 
                                    totalFileSize + ' bytes in ' + 
                                    elapsed.toFixed(1) + ' milliseconds.  Rate=' +
                                    ((totalFileSize/1000000)/(elapsed/1000)).toFixed(2)  + ' Mbps' ;
                       },
                       xhr: function() {
                           var xhrobj = $.ajaxSettings.xhr();
                           if (xhrobj.upload) {
                               xhrobj.upload.addEventListener('progress', function(event) {
                                   var percent = 0;
                                   var position = event.loaded || event.position;
                                   totalFileSize = event.total;
                                   if (event.lengthComputable) {
                                        percent = Math.ceil(position / totalFileSize * 100);
                                   }
                                   uploadStatus.innerHTML = 'Uploading ' + percent + '%.    Please wait.';
                                }, false);
                           }
                           return xhrobj;
                        }
                  } );
        }
</script>
</body>
</html>

1 Ответ

0 голосов
/ 07 мая 2020

Ваше выполнение сценария jquery не должно ничего блокировать. Думаю, единственное повышение производительности, которое вы можете получить, - это серверный сайт.

Но я попытался минимизировать ваш код и сделать его немного проще для чтения. Далее я использовал new Date().getTime(), чтобы получить текущие миллисекунды. Может быть, это вам поможет. 

$(document).ready(function() {

  $('#upload-form').on('submit', onSubmitUploadForm);

  function onSubmitUploadForm(event) {
    event.preventDefault();

    var uploadForm = $(event.target);
    var uploadStatus = $('#upload-status');
    var startTime = new Date().getTime();

    $.ajax({
      url: uploadForm.attr('action'),
      type: uploadForm.attr('method'),
      data: {}, //new FormData(uploadForm),
      processData: false,
      contentType: false,
      cache: false,
      beforeSend: function() {
        onBeforeSend(uploadStatus);
      },
      success: function() {
        onSuccess(uploadForm, startTime);
      },
      error: function() {
        onError(uploadStatus, startTime);
      },
      xhr: function() {
        onXhr(uploadStatus);
      }
    });
  }

  function onBeforeSend(uploadStatus) {
    uploadStatus.text('Uploading...');
  }

  function onSuccessUploadForm(uploadForm, uploadStatus, startTime) {
    var requestTime = new Date().getTime() - startTime;

    uploadStatus.text(
      getSuccessResultText(
        uploadForm.find('input[name="bigFile"]').eq(0).files[0].size,
        requestTime
      )
    );
  }

  function getSuccessResultText(fileSize, requestTime) {
    return 'Upload complete. ' +
      fileSize + ' bytes in ' +
      requestTime + ' milliseconds.  Rate=' +
      ((fileSize / 1000000) / (requestTime / 1000)).toFixed(2) + ' Mbps';
  }

  function onError(uploadStatus, startTime) {
    var requestTime = new Date().getTime() - startTime;
    uploadStatus.text('Something went wrong after ' + requestTime + ' milliseconds');
  }

  function onXhr(uploadStatus) {
    var xhrobj = $.ajaxSettings.xhr();

    if (xhrobj.upload) {
      xhrobj.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
          var percent = (event.loaded / event.total) * 100;
          uploadStatus.text('Uploading ' + percent + '%.    Please wait.');
        }
      }, false);
      return xhr;
    }

    return xhrobj;
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="upload-form" method="post" action="testUploadSpeed.html">
  <input type="file" name="bigFile" />
  <br />
  <input type="submit" value="submit" />
</form>
<p id="uploadStatus"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...