Como começar rapidamente com o VUE3.0: Entre no aprendizado.
Tenho procurado dicas sobre otimização de desempenho do jQuery para tornar meu aplicativo da web dinâmico e inchado mais leve. Depois de pesquisar muitos artigos, decidi listar algumas das melhores e mais utilizadas sugestões para otimizar o desempenho. [Aprendizado recomendado: tutorial em vídeo do jQuery]
1. Sugestões de otimização de desempenho do seletor
1. Sempre herde do seletor #id
Esta é uma regra de ouro para seletores jQuery. A maneira mais rápida de selecionar um elemento em jQuery é selecioná-lo por ID.
2. Use tag na frente da classe
O segundo seletor mais rápido em jQuery é o seletor de tags (como $('head')), porque ele vem diretamente do método Javascript nativo getElementByTagName(). Portanto, é melhor sempre usar tags para modificar classes (e não se esqueça do ID mais próximo).
O seletor de classe no jQuery é o mais lento, porque percorrerá todos os nós DOM no navegador IE. Tente evitar o uso de seletores de classe. Também não use tags para modificar IDs.
3. Use subconsultas
para armazenar objetos pai em cache para uso futuro
4. Otimize os seletores para se adaptarem ao modelo "da direita para a esquerda" do Sizzle
Desde a versão 1.3, o jQuery usa a biblioteca Sizzle, que é a mesma das versões anteriores no mecanismo de seletor. expressões são muito diferentes. Ele substitui o modelo “da direita para a esquerda” por um modelo “da esquerda para a direita”.
5.
Na verdade, é mais rápido usar find() em vez de usar o contexto para encontrar a função find(). Mas se uma página tiver muitos nós DOM, pode levar mais tempo para pesquisar para frente e para trás:
6. Use operações de cadeia poderosas Usar
operações de cadeia do jQuery é mais eficaz do que armazenar seletores em cache.
7. Escreva seu próprio seletor
se você usa seletores com frequência. seu código, então estenda o objeto $.expr[':'] do jQuery para escrever seus próprios seletores.
2. Sugestões para otimizar as operações do DOM
8. Armazeneem
cache objetos jQuery e
elementos de cache que você usa com frequência
9. Ao inserir no DOM, encapsule todos os elementos em um elemento.
em seguida, atualize o DOM. Esta não é uma prática recomendada do jQuery, mas é necessária para operações JavaScript válidas. As operações diretas do DOM são muito lentas. Altere a estrutura HTML o menos possível.
10. Embora o jQuery não lance exceções, os desenvolvedores também devem verificar os objetos.
Embora o jQuery não lance um grande número de exceções aos usuários, os desenvolvedores não devem confiar nisso. jQuery geralmente executa um monte de funções inúteis antes de determinar se um objeto existe. Portanto, antes de fazer uma série de referências a um objeto, você deve primeiro verificar se o objeto existe.
11. Use funções diretas em vez de funções equivalentes.
Para melhor desempenho, você deve usar funções diretas como .ajax() em vez de .ajax() em vez de .ajax(). .getJSON(),.getJSON(),.post(), porque estes últimos chamarão $.ajax().
12.
Armazene em cache os resultados do jQuery para uso posterior.
Freqüentemente, você obterá um objeto de aplicativo javascript - você pode usar App para salvar os objetos que você seleciona com frequência para uso futuro
. esqueça de usar a função .data() para armazenar informações
14. Use a função utilitária jQuery
. Não se esqueça da função utilitária jQuery simples e prática. Meus favoritos são $.isFunction(), isA rray() e isArray() e isArray() e .each().
15. Adicione a classe "JS" ao bloco HTML
. Depois que o jQuery for carregado, primeiro adicione uma classe chamada "JS" ao HTML $('HTML').addClass('JS'); Você pode adicionar estilos CSS.
3. Sugestões para otimizar o desempenho do evento
16. Adiar para (window). Load
às vezes usa (window).load Às vezes usa (window).load Às vezes usa (window).load() do que $(document).ready. .() é mais rápido porque o último não espera até que todos os elementos DOM sejam baixados. Você deve testá-lo antes de usá-lo.
17. Use Delegação de Eventos
Quando você tem muitos nós em um contêiner e deseja vincular um evento a todos os nós, a delegação é muito adequada para tais cenários de aplicação. Usando a delegação, precisamos apenas vincular o evento ao pai e então ver qual nó filho (nó de destino) acionou o evento. Isso se torna muito conveniente quando você tem uma tabela com muitos dados e deseja definir eventos no nó td.
18. Use a abreviatura do evento ready
Se você deseja compactar o plug-in js e salvar cada byte, evite usar $(document).onready()
4. Teste o jQuery
19. Teste de unidade do jQuery
A melhor maneira de testar. O código JavaScript é para usar pessoas. Venha e teste. Mas você pode usar algumas ferramentas automatizadas como Selenium, Funcunit, QUIt, QMock para testar seu código (especialmente plug-ins). Quero discutir esse assunto em outro tópico porque há muito a dizer.
20. Padronize seu código jQuery
Padronize seu código com frequência, veja qual consulta é mais lenta e substitua-a. Você pode usar o console do Firebug. Você também pode usar as funções de atalho do jQuery para facilitar os testes.
5. Outras sugestões comuns de otimização de desempenho do jQuery
21. Use a versão mais recente do jQuery
A versão mais recente geralmente é a melhor. Após alterar as versões, não esqueça de testar seu código. Às vezes, não é totalmente compatível com versões anteriores.
22. Usando HTML5
O novo padrão HTML5 traz uma estrutura DOM mais leve. Uma estrutura mais leve significa que menos travessias são necessárias ao usar jQuery e melhor desempenho de carregamento. Portanto, use HTML5, se possível.
23. Se você deseja adicionar estilos a mais de 15 elementos,
a melhor maneira de adicionar tags de estilo diretamente aos elementos DOM é usar a função css() do jQuey para estilizar alguns elementos. No entanto, ao adicionar estilos a mais de 15 elementos, é mais eficaz adicionar tags de estilo diretamente ao DOM. Este método evita o uso de código rígido no código.
24. Evite carregar código redundante
É uma boa ideia colocar código Javascript em arquivos diferentes e carregá-los somente quando necessário. Dessa forma, você não carregará códigos e seletores desnecessários. Também é fácil gerenciar código.
25. Compacte em um arquivo JS principal para manter o número de downloads no mínimo.
Depois de determinar quais arquivos devem ser carregados, empacote-os em um arquivo. Use algumas ferramentas de código aberto para fazer isso automaticamente, como usar Minify (integrado ao seu código de back-end) ou usar ferramentas online como JSCompressor, YUI Compressor ou Dean Edwards JS packer para compactar arquivos para você. Meu favorito é JSCompressor.
26. É ótimo usar Javascript nativo quando necessário.
Usar jQuery é ótimo, mas não esqueça que também é um framework para Javascript. Assim, você pode usar funções Javascript nativas quando necessário no código jQuery, o que pode obter melhor desempenho.
27. Carregue o framework jQuery do Google
Quando seu aplicativo for lançado oficialmente, carregue o jQuery do Google CDN, pois os usuários podem obter o código no local mais próximo. Dessa forma, você pode reduzir as solicitações do servidor e, se o usuário navegar em outro site que também use o jQuery do Google CDN, o navegador chamará imediatamente o código jQuery do cache.
28. O carregamento lento de conteúdo pode não apenas melhorar a velocidade de carregamento, mas também melhorar a otimização de SEO. Use Ajax para carregar seu site, o que pode economizar tempo de carregamento no servidor. Você pode começar com um widget comum da barra lateral.
[Aprendizado recomendado: vídeo jQuery, desenvolvimento de front-end da web]
O texto acima é como otimizar o desempenho do jQuery? Para obter detalhes sobre o resumo dos métodos de otimização, preste atenção a outros artigos relacionados no site PHP chinês para obter mais informações!
