UI 스레드를 차단하지 않고 어떻게 대규모 배열을 반복할 수 있나요?

비차단 배열 반복 전략

대규모 배열을 반복할 때 UI 스레드를 차단하고 사용자 경험을 저하시키지 않는 것이 중요합니다. 이 기사에서는 웹 워커를 사용하지 않고 웹 워커를 사용하여 비차단 반복을 달성하기 위한 다양한 전략을 살펴봅니다.

웹 워커 없이

상호작용이 필요한 코드의 경우 DOM을 사용하는 경우 일반적인 솔루션은 반복을 더 작은 덩어리로 나누고 타이머를 사용하여 비동기식으로 처리하는 것입니다. 이렇게 하면 브라우저가 다른 이벤트를 처리하여 UI의 응답성을 유지할 수 있습니다.

<code class="javascript">function processLargeArray(array) {
  // Chunk size for processing
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index] here
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      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-- && index < array.length) {
      // Call the callback with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

최적의 청크 크기를 추측하지 않으려면 간격 기반 접근 방식을 사용할 수 있습니다.

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

  function now() {
    return new Date().getTime();
  }

  function doChunk() {
    var startTime = now();
    while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
      // Call the callback with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

웹 작업자 사용

웹 작업자는 반복 시 다른 솔루션을 제공합니다. 코드에는 DOM 액세스가 필요하지 않습니다. 시간이 많이 걸리는 코드는 별도의 스크립트 파일로 이동되어 작업자 스레드에서 실행됩니다. 완료되면 작업자는 이벤트 처리를 방해하지 않고 결과를 다시 메인 스레드에 게시할 수 있습니다.

위 내용은 UI 스레드를 차단하지 않고 어떻게 대규모 배열을 반복할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!