3

Estou fazendo um player de música em jQuery/JavaScript/HTML5 e esta indo tudo bem, mas quando ele começa a rodar as músicas +ou- na 13ª faixa começa a ficar bem lento a página e dá umas "travadas" e fica impossível de continuar sem atualizar a página e perder a playlist, queria saber qual o problema com meu código atual...

function readFile3(file, file2){
    fileA = URL.createObjectURL(file);
    audioElement.setAttribute('src', fileA);
    audioElement.play();
    var test = $("#musics").html();

    $(audioElement).on("loadedmetadata", function () {
        var test3 = test.replace('<div class="music"><div class="bola"></div>'  + file3[file2].name + '</div>', '<div class="music2"><div class="bola2"></div>'  + file3[file2].name + '</div>');
        $("#musics").html(test3);
        $("#div3a").scrollTop(0);
        $("#div3a").scrollTop($(".music2").position().top);
    });

    $(audioElement).on("ended", function () {
        if (file2 < fill - 1) {
            $("#musics").html(test);
            file2 = file2 + 1;
            readFile3(file3[file2], file2);
        }
        else {
            $("#musics").html(test);
            audioElement.load();
        }
    });

    $(audioElement).on("timeupdate", function () {
        tempo();
        videoTimeUpdateHandler();
    });
};

Não é meu primeiro script em jQuery que acontece isso, será bug no jQuery ou eu estou fazendo alguma coisa errada?

3
  • 3
    Isso é todo o seu código? Já realizou algum profiling pra ver quais operações consomem mais CPU/RAM/Acesso a disco? Commented 15/09/2014 às 20:18
  • @Renan, fiz o profiling no chrome e não cheguei a conclusão nenhuma, nunca tinha usado esse recurso...por isso deixei o link com o player! OBS: esse não é o código inteiro...
    – Alan PS
    Commented 15/09/2014 às 20:48
  • 1
    Pode ser que está instanciando várias vezes algum objeto, e deixando lá, mesmo após finalizado, algo assim.
    – Tony
    Commented 15/09/2014 às 22:16

1 Resposta 1

2

O principal problema pode ser que a cada troca de música você faz o bind dos eventos loadedmetadata, ended e timeupdate.

Com o passar do tempo o elemento audioElement tem dezenas de eventlisteners.

Pense em um modo de bindar o evento apenas uma vez e utilizar referências para atualizar os valores dinâmicos, como no caso do evento loadedmetadata que se utiliza do valor file3[file2].name. Este valor poderia ser armazenado em uma variável no mesmo escopo do audioElement, e a função readFile3 atualiza essa referência.

Outra boa otimização seria cachear os elementos comuns, como #musics e #div3a. A cada execução da função readFile3 o jQuery tem de procurar estes elementos no documento, o que deixa o runtime muito mais lento.

TL;DR

  • Evenlisteners são muito custosos, use o mínimo possível
  • Evite executar seletores jQuery desnecessários
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .