대규모 배열을 처리할 때 반응형 UI를 보장하는 방법은 무엇입니까?

응답하지 않는 UI 작업을 위한 비동기 반복

대규모 배열을 반복하고 사용자 상호 작용을 방해할 수 있는 긴 작업을 수행하는 경우 채택하는 것이 중요합니다. 사용자 인터페이스의 반응성을 유지하는 전략. 이 가이드에서는 웹 작업자 유무에 관계없이 이를 달성하기 위한 두 가지 접근 방식을 살펴봅니다.

비 WebWorker 솔루션

DOM 조작 또는 기타 상태 종속 작업과 관련된 작업의 경우 웹 작업자를 사용하는 것은 비현실적입니다. 권장되는 접근 방식은 작업을 더 작은 덩어리로 나누고 타이머를 사용하여 비동기적으로 실행하는 것입니다. 이를 통해 브라우저는 이벤트를 처리하고 각 청크 사이의 UI를 업데이트하여 사용자 입력 및 표시 업데이트가 중단되는 것을 방지할 수 있습니다.

아래 코드는 이 기술을 보여줍니다.

<code class="javascript">function processLargeArray(array) {
    // Process 100 items per chunk
    var chunkSize = 100;
    var index = 0;
    function doChunk() {
        for (var i = 0; i < chunkSize && index < array.length; i++) {
            // Process array[index] here
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArray(veryLargeArray);</code>

위의 코드를 forEach() 메서드와 유사하게 콜백을 허용하는 일반 함수에 추가합니다.

<code class="javascript">function processLargeArrayAsync(array, fn, chunkSize, context) {
    context = context || window;
    chunkSize = chunkSize || 100;
    var index = 0;
    function doChunk() {
        for (var i = 0; i < chunkSize && index < array.length; i++) {
            // Callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback, 100);</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) {
            // Callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // Schedule next async chunk
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback);</code>

WebWorker 솔루션

루프 코드가 다음과 상호 작용하지 않는 경우 DOM 또는 기타 브라우저 상태에 따라 웹 작업자를 활용하여 별도의 스레드에서 작업을 실행할 수 있습니다. 웹 워커는 독립적으로 실행되며 postMessage를 통해 결과를 메인 스레드에 다시 전달합니다. 이 접근 방식을 사용하면 과도한 계산이 백그라운드에서 수행되는 동안 UI 스레드의 응답성이 유지됩니다. 단, 웹 워커에서 실행되는 코드를 별도의 스크립트 파일로 옮겨야 한다는 점에 유의하세요.

위 내용은 대규모 배열을 처리할 때 반응형 UI를 보장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!