Acredito que todo mundo sabe que o JavaScript é um idioma de desenvolvimento de pilha completa, e o JS pode ser visto no navegador, telefone celular e lado do servidor. Este artigo compartilhará algumas práticas recomendadas eficientes do JavaScript para melhorar sua compreensão dos JS subjacentes e princípios de implementação.
Armazenamento de dados
Há um problema clássico na disciplina do computador que atinge o desempenho ideal de leitura e gravação alterando a localização do armazenamento de dados. No JavaScript, a localização do armazenamento de dados pode ter um impacto significativo no desempenho do código. Se você pode criar objetos com {}, não use novo objeto. Se você pode criar matrizes com [], não use nova matriz. A velocidade de acesso dos literais em JS é maior que a dos objetos. Quanto mais profunda a variável estiver na cadeia de escopo, maior a prática necessária para o acesso. Para essas variáveis, as variáveis locais podem ser salvas através do cache, reduzindo o número de acessos a cadeias de escopo, não há muita diferença entre a notação de pontos (object.name) e o operador (objeto [nome]). Somente o Safari terá a diferença e os pontos são sempre mais rápidos
ciclo
Existem vários loops comuns em JS:
for (var i = 0; i <10; i ++) {// faça algo} para (var prop no objeto) {// para objeto de loop} [1,2] .foreach (function (value, índice, matriz) {// loop baseado em função})Escusado será duvidoso, o primeiro método é nativo, com o menor consumo de desempenho e a velocidade mais rápida. O segundo método para in-in gera mais despesas gerais (variáveis locais) todas as iterações e sua velocidade é apenas 1/7 do primeiro tipo. O terceiro método obviamente fornece um método de loop mais conveniente, mas sua velocidade é apenas 1/8 do loop comum. Portanto, você pode escolher o método de loop apropriado de acordo com a situação do seu projeto.
Delegação de eventos
Imagine adicionar um evento a cada uma tag A na página. Vamos adicionar um OnClick a cada tag? Essa situação pode afetar o desempenho quando há um grande número de elementos na página que precisam estar vinculados ao mesmo processamento de eventos. Cada evento de ligação aumenta a carga na página ou durante a corrida. Para uma aplicação rica de front-end, muitas ligações ocuparão muita memória em uma página com interações pesadas. Uma maneira simples e elegante é a delegação de eventos. É um fluxo de trabalho baseado em eventos: capture camada por camada, atinja o alvo, a camada de bolhas por camada por camada. Como existe um mecanismo de bolha para eventos, podemos lidar com eventos a partir de todos os elementos infantis, vinculando eventos à camada externa.
document.getElementById ('content'). OnClick = function (e) {e = e || Window.Event; VAR Target = E.Target || E.Srcelement; // Se não for a tag a, eu sairei se (Target.nodenmae! === 'A') {return} // imprima o endereço de link de um console.log (Target.href)}Repintar e reorganizar
Após o download do navegador HTML, CSS e JS, duas árvores serão geradas: a árvore dom e a árvore de renderização. Quando as propriedades geométricas de Dom mudam, como a largura e a altura de Dom, a posição, o navegador precisa recalcular as propriedades geométricas do elemento e reconstruir a árvore de renderização. Esse processo é chamado de redesenho e rearranjo.
bodystyle = document.body.style; bodystyle.color = vermelho; bodystyle.Height = 1000px; bodystyke.width = 100%;
Ao modificar as três propriedades no método acima, o navegador pintará novamente três vezes. Em alguns casos, a redução desse rearranjo pode melhorar o desempenho da renderização do navegador. O método recomendado é o seguinte: apenas uma operação é executada e três etapas são concluídas:
bodystyle = document.body.style; bodystyle.CSSTEXT 'cor: vermelho; altura: 1000px; largura: 100%';
Carregamento de JavaScript
IE8, Firefox3.5 e Chrome2 permitem o download necessário dos arquivos JavaScript. Portanto, <cript> não bloqueará outros downloads de tags. Infelizmente, o processo de download do JS ainda bloqueará o download de outros recursos, como imagens. Embora os navegadores mais recentes melhorem o desempenho, permitindo downloads paralelos, o bloqueio de scripts ainda é um problema. Portanto, é recomendável colocar todas as tags <Script> na parte inferior das tags <body> para minimizar o impacto na renderização de toda a página e evitar que os usuários vejam um espaço em branco
Implantação de arquivos JS de alto desempenho
Como você já sabe que várias tags <Script> afetarão a velocidade de renderização da página, não é difícil entender que "reduzir o HTTP necessário para a renderização da página" é uma regra clássica para a velocidade do site. Portanto, a fusão de todos os arquivos JS no ambiente do produto reduzirá o número de solicitações, acelerando assim a renderização da página. Além de mesclar arquivos JS, também podemos comprimir arquivos JS. A compactação refere -se a tirar partes de um arquivo que não estão relacionadas à execução. O conteúdo despojado inclui caracteres de espaço em branco e comentários. O processo de modificação geralmente pode reduzir o tamanho do arquivo pela metade. Existem também algumas ferramentas de compressão que reduzem a duração das variáveis locais, como:
var myname = "foo" + "bar"; // Após a compactação, torna -se var a = "foobar";
Arquivos JS de cache
Os componentes HTTP em cache podem melhorar bastante a experiência do usuário das visitas de retorno do site. O servidor da Web usa o "Cabeçalho de resposta HTTP expire" para informar ao cliente por quanto tempo um recurso deve ser armazenado em cache. Obviamente, o Cache também tem suas próprias falhas: quando o aplicativo é atualizado, você precisa garantir que o usuário baixe o conteúdo estático mais recente. Esse problema pode ser resolvido alterando o nome do arquivo do recurso estático. Você pode ver a referência do navegador JSAPplication-20151123201212.js no ambiente do produto. Isso é para salvar o novo arquivo JS em um registro de data e hora, resolvendo assim o problema de não ser atualizado em cache.
Resumir
Obviamente, o JS eficiente não é apenas sobre essas coisas que podem ser melhoradas. Se algumas perdas de desempenho puderem ser reduzidas, podemos usar o JavaScript para desenvolver com mais eficiência.