Leggere un file in Javascript senza bloccare l'I/O

Question

Come posso leggere un file usando FileReader() senza bloccare l'I/O durante la lettura? Quello che segue è come sto facendo ora:

function readImageFile(imageFile, callback) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     callback(e.target.result); 
    }; 
    reader.readAsDataURL(imageFile); 
} 

che funziona bene, tranne che ho bisogno di elaborare le immagini molto grandi (> risoluzione 4k) che prende una notevole quantità di tempo. Non riesco a bloccare l'input dell'utente dall'utilizzo di altre funzionalità nella pagina durante la lettura.

Answer 1

Credo FileReader è già asincrona: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

L'oggetto FileReader consente alle applicazioni web di leggere in modo asincrono le contenuto dei file (o buffer di dati grezzi) memorizzati sul computer dell'utente, utilizzando il file o Blob oggetti specificare il file o i dati da leggere.

FileReaderSync sarebbe la versione sincrona: https://developer.mozilla.org/en-US/docs/Web/API/FileReaderSync

Answer 2

FileReader.readAsDataURL è asincrona. Non blocca l'interfaccia utente per definizione (https://www.w3.org/TR/FileAPI/). Ma per elaborare un file, il computer deve spendere alcune risorse, quindi è necessario considerare questo. È possibile che l'elaborazione di un grande file richieda molte risorse.