Achar o ponto de falha e corrigir em 1 segundo ou menos

Estou desenvolvendo um sistema onde a página é populada com diversos elementos criados dinamicamente, chegando facilmente a 400 elementos. Um exemplo disso pode ser visto em: http://jsfiddle.net/Ljg6w/7/

Quando um elemento é selecionado, mais detalhes são apresentados, porém conforme a quantidade de elementos aumentava a animação de apresentação do detalhe começava a perder performance e não ficar suave.

Comecei a olhar e depurar o código, até que me deparei com a linha 8 do javascript:

$(".element").removeClass("selected");

Nesta linha, o browser simplesmente levava 1 segundo para executar, e UM segundo é muito tempo já que somente um elemento estava selecionado.

Um análise de 1 segundo bastou para entender e corrigir o problema. O objetivo era remover a classe “selected” dos elementos que estavam com a classe , logo:

$(".element.selected").removeClass("selected");

resolveria o problema. Pronto!!! Problema corrigido e a performance da página não decai mais conforme novos elementos vão sendo adicionados.

Se isso fosse uma fábula, eu diria que o moral da história é: “Se algo parece errado, é porque realmente está. Basta procurar que o problema vai ser encontrado e, talvez, corrigido em 1 segundo”

2 comentários sobre “Achar o ponto de falha e corrigir em 1 segundo ou menos

  1. É meu amigo, um seletor mal criado pode comprometer e muito a performance de uma aplicação com um DOM pesado. Uma dica bacana para encontrar esses e outros gargalos na fluidez de uma app é usar a extensão Speed Tracer do Chrome.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s