Bagaimana untuk Memastikan UI Responsif Semasa Memproses Tatasusunan Besar?

Lelaran Asynchronous untuk Operasi UI Tidak Responsif

Apabila melelaran pada tatasusunan besar dan melakukan operasi yang panjang yang boleh menghalang interaksi pengguna, ia menjadi penting untuk menerima pakai strategi yang mengekalkan tindak balas antara muka pengguna. Panduan ini meneroka dua pendekatan untuk mencapai ini, kedua-duanya dengan dan tanpa pekerja web.

Penyelesaian Bukan Pekerja Web

Untuk operasi yang melibatkan manipulasi DOM atau tugas lain yang bergantung kepada keadaan, menggunakan pekerja web adalah tidak praktikal. Pendekatan yang disyorkan adalah untuk memecahkan kerja kepada ketulan yang lebih kecil dan melaksanakannya secara tidak segerak menggunakan pemasa. Ini membolehkan penyemak imbas memproses acara dan mengemas kini UI antara setiap bahagian, menghalang gangguan dalam input pengguna dan kemas kini paparan.

Kod di bawah menunjukkan teknik ini:

<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>

Anda boleh melanjutkan kod di atas kepada fungsi generik yang menerima panggilan balik, serupa dengan kaedah 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>

Untuk kawalan yang lebih halus ke atas pelaksanaan async, anda boleh menentukan had masa maksimum bagi setiap bahagian dan bukannya bahagian tetap saiz:

<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>

Penyelesaian WebWorker

Jika kod gelung anda tidak berinteraksi dengan DOM atau keadaan penyemak imbas lain, anda boleh memanfaatkan pekerja web untuk melaksanakan operasi dalam benang berasingan. Pekerja web berjalan secara bebas dan menyampaikan hasil kembali ke utas utama melalui postMessage. Pendekatan ini memastikan bahawa urutan UI kekal responsif semasa pengiraan berat berlaku di latar belakang. Walau bagaimanapun, ambil perhatian bahawa anda perlu mengalihkan kod yang dijalankan dalam pekerja web ke fail skrip yang berasingan.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan UI Responsif Semasa Memproses Tatasusunan Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!