Desempenho do JavaScript

O desempenho da Web é uma métrica objetiva e também a percepção e experiência do usuário durante o tempo de carregamento e execução.

O desempenho da Web é o tempo de carregamento, interação e resposta do site, bem como a suavidade do conteúdo durante a interação do usuário.

Muitas funcionalidades afetam o desempenho, incluindo atrasos, tamanho do aplicativo, número de nós DOM, número de solicitações de recursos emitidas, desempenho do JavaScript, carga do CPU, etc.

Como melhorar o desempenho da Web?

Reduzir a atividade do loop

Instruções que podem ser colocadas fora do loop ou atribuições farão o loop rodar mais rápido.

No exemplo a seguir, acessamos a propriedade length do array em cada iteração do loop:

for (let i = 0; i < arr.length;++) {

No exemplo a seguir, acessamos a propriedade length fora do loop e fazemos o loop rodar mais rápido:

let size = arr.length;
for (let i = 0; i < size;++) {

Aumentar a eficiência de acesso ao DOM

Em comparação com outras instruções JavaScript, o acesso ao HTML DOM é muito lento.

Se precisar acessar várias vezes elementos do DOM, acesse uma vez e use como variável local.

Coloque o JavaScript no final da página

Coloque o script no final do corpo da página, permitindo que o navegador carregue primeiro a página.

Quando o navegador baixa o script, ele não iniciará nenhuma outra download e todas as atividades de análise e renderização podem ser bloqueadas.

Uma outra maneira é usardefer="true". OAtrasoO script deve ser executado após a especificação de atributos da página ser concluída, mas isso só se aplica a scripts externos.

Não use a palavra-chave 'with'

A palavra-chave with é considerada 'inútil', pois possui alguns defeitos muito frustrantes.

Embora com o with simplifique o processo de manipulação de atributos locais, usar with aumenta o custo de busca de variáveis em outros escopos.

Não é permitido usar palavras-chave no modo estrito.

Mínimas solicitações HTTP

Minimize as solicitações HTTP ao combinar arquivos externos e incluir JavaScript diretamente na página HTML.

Cada acesso único ao servidor HTTP causará uma grande quantidade de atraso.

Não use o mesmo script duas vezes

Scripts repetitivos têm um grande impacto no desempenho. Scripts repetitivos criarão solicitações desnecessárias na HTTP, especialmente no navegador IE.

Não use eval()

Embora oeval()A função é uma boa maneira de executar código arbitrário, mas cada string passada para a função eval deve ser analisada e executada imediatamente. Cada execução até a chamada da função eval gera um custo.