Seis Melhores Práticas do jQuery para Melhor Desempenho

jQuery é um dos a bibliotecas JavaScript mais populares hoje. Sua API é muito fácil de usar, levando a uma curva de aprendizado não tão íngreme. Muitos projetos usam o código jQuery em vez de usar diretamente o JavaScript vanilla para trazer funcionalidades dinâmicas.

Mas o jQuery também tem suas falhas. Isso pode levar a alguns problemas de desempenho se usados ​​de maneira descuidada assim como a linguagem na qual se baseia. Este post listará algumas das melhores práticas no uso do jQuery que nos ajudarão a evitar problemas de desempenho.

1. scripts de carga preguiçoso quando necessário

Os navegadores executam JavaScript antes de criar a árvore DOM e pintar os pixels na tela, porque os scripts podem adicionar novos elementos à página ou alterar o layout ou o estilo de alguns nós DOM. Por isso dando ao navegador menos scripts para executar durante o carregamento da página, podemos reduzir o tempo que leva para a criação e pintura final da árvore DOM, após o qual o usuário será capaz de ver a página.

Uma maneira de fazer isso no jQuery é usando $ .getScript para carregar qualquer arquivo de script no momento de sua necessidade e não durante o carregamento da página.

$ .getScript ("scripts / gallery.js", callback); 

É uma função ajax que irá obter um único arquivo de script quando você quiser, mas observe que o arquivo buscado não é armazenado em cache. Para habilitar o cache para getScript você terá que habilitar o mesmo para todos os pedidos de ajax. Você pode fazer isso usando o código abaixo:

$ .ajaxSetup (cache: true); 

2. Evite $ (janela) .load () se o seu script não precisar de nenhum sub-recurso da página

o $ (documento) .ready () é equivalente a DOMContentLoaded (Onde DOMContentLoaded está disponível) e $ (janela) .load () para Carga. O primeiro é acionado quando o próprio DOM de uma página é carregado, mas não ativos externos, como imagens e folhas de estilo. O segundo é acionado quando tudo que uma página é composta, incluindo seu próprio conteúdo e seus sub-recursos são carregados.

Então, se você está escrevendo um script que depende dos sub-recursos de uma página, como mudar a cor de fundo de uma div que é estilizado por uma folha de estilo externa, é melhor usar $ (janela) .load ().

Mas, se não for esse o caso, é melhor ficar com $ (documento) .ready () porque, jQuery chama seu pronto manipulador de eventos se você usa $ (documento) .ready () ou não, então use quando puder.

3. Use desanexar para remover elementos do DOM que precisavam ser alterados.

“Refluxo” é um termo que se refere a alterações de layout em uma página da Web, quando o navegador reorganiza os elementos de uma página para acomodar um novo elemento, ajusta as alterações estruturais de um elemento, preenche a lacuna deixada por um elemento removido ou outra ação que precisa de um mudança de layout na página. refluxo é um caro processo de navegador.

Nós podemos reduzir o não. de refluxos causados ​​por mudanças estruturais em um elemento executando as mudanças nele depois de tirando-o do fluxo da página e colocando de volta quando estiver pronto. Se você estiver adicionando várias linhas a uma tabela, uma a uma, causará muitos refluxos. Então é melhor tire a tabela da árvore DOM, adicione as linhas a ela e coloque-a de volta no DOM; isso reduzirá os refluxos.

jQuery's desanexar () nos permite remover um elemento da página, é diferente de remover() porque ele salvará os dados associados ao elemento quando precisar ser adicionado à página posteriormente. Um elemento desanexado pode ser colocado de volta na página quando tiver sido modificado.

4. Use css () para definir altura ou largura em vez de altura() e largura()

Se você está definindo a altura ou a largura de um elemento no jQuery, sugiro que use o css () função porque a definição desses valores usando altura() e largura() causará refluxos extras devido ao acesso de algumas propriedades de layout na função computeStyleTests em jQuery (testado na última versão).

Para o código p.height ("300px"); aqui estão os refluxos.

Para p.css ("height": "300px");

computeStyleTests é usado para fazer alguns testes de suporte. Também é chamado enquanto obtendo a altura e largura usando ambos css () e altura largura() , mas pelo configuração só é chamado para altura largura() que pode não ser necessário, então use css () em vez de.

5. Não acesse propriedades de layout desnecessariamente

Acessar propriedades de layout, como altura, largura, margem etc., acionará o refluxo na página. O motivo é que sempre que você perguntar ao navegador por alguma das propriedades do layout, garante que você obtenha o valor atualizado (caso o valor tenha sido invalidado antes) por recalculando os valores e aplicando qualquer alteração de layout.

Então, se você está usando jQuery ou JavaScript vanilla, Cuidado com o acesso desnecessário a propriedades de layout especialmente em um loop ou, consequentemente, depois de fazer mudanças de estilo.

6. Faça uso do cache onde você pode

Algumas das funções do jQuery vêm com mecanismos de cache que podem ser bem aproveitados. As solicitações do Ajax armazenam os recursos em cache, mas não estão disponíveis para roteiro e jsonp, Então, se você quiser caching em todos os seus pedidos de ajax, você pode querer definir globalmente como abaixo.

Observe também que, se você buscar recursos usando postar ele não será armazenado em cache mesmo se você ativar o armazenamento em cache com a configuração acima.

Como eu mencionei antes, desanexar () armazena em cache os dados associados ao elemento a ser removido ao contrário remover();ocultar() armazena em cache o CSS inicial exibição valor de um elemento antes de ocultá-lo para que possa ser restaurado mais tarde sem perder os dados.

Conclusão

Uma maneira de ter certeza de estar usando o código jQuery mais eficaz para sua necessidade é aguardar até que você realmente execute seu código e observe se há algum problema de desempenho ou não. Se houver, use as ferramentas de desempenho e depurador para detectar a raiz do problema.

Como o jQuery é como um casulo para JavaScript com funcionalidades adicionais para compatibilidades e recursos do navegador, pode ser difícil diagnosticar os problemas sem essas ferramentas.