UI 응답성을 유지하기 위해 JavaScript에서 대규모 배열을 비동기식으로 반복하려면 어떻게 해야 합니까?

UI 응답성을 유지하기 위해 배열을 비동기식으로 반복

대형 배열을 처리할 때 루프 내에서 배열을 조작하면 잠재적으로 UI가 정지되어 사용자 상호 작용을 방해하고 사용자 경험이 저하될 수 있습니다. 이 문제를 방지하려면 다음과 같은 몇 가지 기술을 사용해야 합니다.

WebWorkers 없이

코드가 DOM과 상호 작용해야 하는 시나리오에서는 WebWorkers를 사용하는 것이 불가능합니다. 대신, 루프를 더 작은 덩어리로 나누고 setTimeout()과 같은 타이머를 사용하여 순서대로 실행하는 것을 고려하십시오. 이렇게 하면 브라우저 엔진이 그 사이에 다른 이벤트를 처리하여 UI 잠금을 방지할 수 있습니다.

다음은 이 기술을 사용하는 함수의 예입니다.

<code class="javascript">function processLargeArray(array) {
  // Set the chunk size to determine how many items to process at once.
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Process array[index] here.
      ++index;
    }
    if (index < array.length) {
      // Set a timeout to continue processing asynchronously.
      setTimeout(doChunk, 1);
    }
  }
  
  doChunk();
}</code>

또한 다음과 같은 일반 버전을 생성할 수도 있습니다. 콜백 함수 호출:

<code class="javascript">function processLargeArrayAsync(array, fn, chunk, context) {
  context = context || window;
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Call the callback with args (value, index, array).
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set a timeout for continued async processing.
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

WebWorkers 사용

DOM과 상호작용하지 않는 코드의 경우 WebWorkers를 활용하는 것이 효과적인 접근 방식입니다. WebWorker는 기본 UI 스레드와 독립적으로 실행되므로 UI ​​처리가 영향을 받지 않습니다. 그러나 WebWorker를 사용하려면 JavaScript 코드를 별도의 스크립트 파일로 분리해야 합니다.

다음은 WebWorker를 사용하는 간단한 예입니다.

<code class="javascript">// Create a new WebWorker.
var worker = new Worker('worker.js');

// Send data to the worker.
worker.postMessage(array);

// Listen for messages from the worker.
worker.addEventListener('message', function(e) {
  // Process the results returned from the worker.
});</code>

worker.js 파일에서:

<code class="javascript">// Receive data from the main thread.
self.addEventListener('message', function(e) {
  var array = e.data;

  // Process the array in the web worker.

  // Send the results back to the main thread.
  self.postMessage(results);
});</code>

이러한 기술을 사용하면 UI 응답성을 저하시키지 않고 대규모 배열을 반복하여 원활하고 대화형 사용자 경험을 보장할 수 있습니다.

위 내용은 UI 응답성을 유지하기 위해 JavaScript에서 대규모 배열을 비동기식으로 반복하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!