0

我有一个获取用户本地目录的代码，然后为它在目录中找到的每个 mp3 文件打开一个文件读取器对象。有时这可能超过 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 设置为“”......不确定它是否有助于内存管理，但似乎使 chrome 分配保持在相当高的水平）。

您可以通过管理您保持打开的 FileReader 的数量来提高顺序解决方案的吞吐量（比如有一个n 个阅读器池，一旦完成，就将它提供给列表中的下一个项目并尝试找到之间的权衡连接数、吞吐量和稳定性

可能有更优雅的解决方案；）

$(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 回答