0

ユーザーのローカル ディレクトリを取得し、ディレクトリで見つかった各 mp3 ファイルの filereader オブジェクトを開くコードがあります。1,000 ファイルを超える場合もあります。ブラウザがクラッシュしないように、このコードを最適化するにはどうすればよいですか? 最大 200 ～ 300 個のファイルが含まれるディレクトリに対しては完全に機能しますが、コンソール ログにエラーが表示されることなくブラウザがクラッシュします。どんな提案でも大歓迎です。私のコードの jsFiddle ページへのリンクは次のとおりです: http://jsfiddle.net/X6BZe/

filecount 変数を使用して、ファイルを 10 個のグループに分割し、settimeout 関数で分散しようとしていますが、あまり効果的ではないようです。それでもブラウザをクラッシュさせずに試しました。

これが私のコードの主要部分です。残りの部分は、ID3 タグの取得を支援する jDataView コードです。

$(document).ready(function(){
$("#file-input").on("change", function(e){
var thefiles = e.target.files;
var filecount = 0;
$.each(thefiles, function(i, item){
    if(item.type == "audio/mp3"){
        var reader = new FileReader();
        reader.onload = function() {
            var dv = new jDataView(this.result);
            if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
                var title = dv.getString(30, dv.tell());
                var artist = dv.getString(30, dv.tell());
                var album = dv.getString(30, dv.tell());
                var year = dv.getString(4, dv.tell());
                $("#thelist").append(title + " - " + artist + " - " + album + " - " + year + "<br />");
            } 
            else {// no ID3v1 data found.
                var title = "????";
                var artist = "????";
                var album = "????";
                var year = "????";
            }
            dv = "";
        }
        reader.readAsArrayBuffer(thefile);
    }
    filecount += 1;
    if(filecount == 10){
        setTimeout(function(){}, 1000);         
        filecount = 0;
    }
});
});
4

1 に答える 1

1

問題は、開いて読んでしまう膨大な数のファイルにあるようです...

私がそれをリファクタリングすると（かなり醜いコードについては以下を参照してください。ただし、コンソールログがたくさんあるので、何が起こるかを見ることができます）、配列全体の FileReaders を爆破して開こうとするのではなく、順番に処理します。おそらく必要になるでしょう（最後にID3タグを取得するために各ファイルを読み取る必要があるため）クラッシュしません（処理後にdvとfilereaderを「」に設定しました...それが役立つかどうかわかりませんメモリ管理に影響を与えましたが、クロムの割り当てをかなり高く維持しているように見えました)。

開いたままにしておく FileReader の数を管理することで、シーケンシャル ソリューションよりもスループットを向上させることができる場合があります (たとえば、nリーダーのプールがあり、1 つが終了したらすぐにリスト内の次の項目をフィードし、実験して間のトレードオフを見つけます)。接続数、スループット、安定性

おそらくもっとエレガントなソリューションがあります;）

$(document).ready(function(){
    $("#file-input").on("change", function(e){
    var thefiles = e.target.files;

  var i = 0;

  //    $.each(thefiles, function(i, item){
//      var thefile = item;

console.log("Start process");
process(i);
console.log("------> All Done <---------");

function process(wf) {
    thefile = thefiles[wf];
        if (thefile.type == "audio/mp3") {
            console.log("Read " + thefile.name + " " + thefile.type);

            var reader = new FileReader();
                reader.onload = function() {
                    console.log("********** Processing ");
                var dv = new jDataView(this.result);
                if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
                    var title = dv.getString(30, dv.tell());
                    var artist = dv.getString(30, dv.tell());
                    var album = dv.getString(30, dv.tell());
                    var year = dv.getString(4, dv.tell());
                    $("#thelist").append(title + " - " + artist + " - " + album + " - " + year + "<br />");
                } 
                else {// no ID3v1 data found.
                    var title = "????";
                    var artist = "????";
                    var album = "????";
                    var year = "????";
                }
                dv = "";
                reader = "";
                console.log("Processed");
                    i++
                            if (i<thefiles.length) {
                    process(i);
                } else {
                    return
                }
            }

            reader.readAsArrayBuffer(thefile);
        } else {
            console.log("Skip " + thefile.name + " " + thefile.type);
                i++
                             if (i<thefiles.length) {

                              process(i);
                } else {
                    return
                }
        }


  } // end of process

//  });
});
});
于 2013-01-27T03:25:35.280 に答える