Eficiência da estrutura jQuery/Javascript

Question

Meu projeto mais recente está usando um framework javascript (jQuery), junto com alguns plugins (validação, jquery-ui, datepicker, facebox, ...) para ajudar a criar uma aplicação web moderna.

Agora estou descobrindo que as páginas carregam mais lentamente do que estou acostumado.Depois de alguns perfis js (obrigado VS2010!), parece que muito tempo é gasto no processamento dentro da estrutura.

Agora entendo que quanto mais complexas as ferramentas de interface do usuário, mais processamento precisa ser feito.O projeto ainda não está em um estágio amplo e acho que teria funções medianas.Nesta fase, posso ver que não vai escalar bem.

Percebi que coisas como o comando 'each' no jQuery levam muito tempo de processamento.

Outros experimentaram alguma latência extra usando estruturas JS?Como posso minimizar o efeito deles no desempenho da página?Existem práticas recomendadas de implementação usando estruturas JS?

Obrigado

Answer 1

Minha opinião pessoal é usar os métodos e ferramentas da estrutura onde eles fazem sentido e facilitam a vida, por exemplo, seletores e solução de peculiaridades entre navegadores, e usar o velho JavaScript simples onde não há necessidade de usar os métodos da estrutura, por exemplo , em loops simples.

Eu verificaria e verificaria novamente o código que você possui e que usa a estrutura para garantir que ele funcionará da melhor maneira possível;é muito fácil usar uma estrutura com baixo desempenho e às vezes ninguém descobre isso até traçar um perfil :)

As estruturas introduzem latência extra, pois geralmente há uma série de funções que são executadas como resultado do uso da função de ponto de entrada para usá-las.

EDITAR:

Alguns pontos gerais com relação ao uso do jQuery:

1. Armazene em cache seus objetos jQuery em variáveis ​​locais se você for usá-los mais de uma vez.Consultar o DOM é uma operação relativamente cara e, portanto, deve ser feita tão pouco quanto necessário.Se você tiver seletores relacionados, observe como realizar uma seleção ampla e, em seguida, usar métodos como find(), filter() next(), prev() etc para filtrar a coleção para obter os elementos relevantes que você usaria outra função de seletor para obter.

2.Dentro das funções, não envolva objetos em objetos jQuery desnecessariamente.Se houver uma maneira entre navegadores de acessar um valor de propriedade de objeto que seja confiável, use-a.Por exemplo, a propriedade value de uma entrada de texto HTMLElement

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 }); 

3.Tente evitar adicionar arquivos de script grandes onde você está usando apenas uma pequena parte da funcionalidade.Pode ser gasto muito tempo analisando e executando código no carregamento da página que você nunca usará!Se possível, extraia apenas o código relevante necessário.Compreendo que isso pode ser difícil e nem sempre possível, principalmente quando se trata de controle de versão, mas vale a pena ressaltar mesmo assim.