Otimizar a execução do JavaScript

O JavaScript geralmente aciona mudanças visuais. Às vezes, isso acontece diretamente por manipulações de estilo e, às vezes, por cálculos que resultam em mudanças visuais, como pesquisar ou classificar dados. JavaScripts mal programados ou de longa duração são uma causa comum de problemas de desempenho. Procure minimizar o impacto sempre que possível.

O JavaScript geralmente aciona mudanças visuais. Às vezes, isso acontece diretamente por manipulações de estilo e, às vezes, por cálculos que resultam em mudanças visuais, como pesquisar ou classificar dados. O JavaScript mal programado ou de longa duração é uma causa comum de problemas de desempenho. Procure minimizar o impacto sempre que possível.

O perfil de desempenho do JavaScript pode ser uma arte, porque o JavaScript que você escreve não se parece em nada com o código que é realmente executado. Os navegadores modernos usam compiladores JIT e todos os tipos de otimizações e truques para tentar oferecer a execução mais rápida possível. Isso muda significativamente a dinâmica do código.

No entanto, há algumas coisas que você pode fazer para ajudar seus apps a executar JavaScript corretamente.

Resumo

• Evite usar setTimeout ou setInterval para atualizações visuais. Use sempre requestAnimationFrame.
• Mova o JavaScript de longa duração da linha de execução principal para os Web Workers.
• Use microtarefas para fazer mudanças no DOM em vários frames.
• Use a linha do tempo e o perfilador de JavaScript do Chrome DevTools para avaliar o impacto do JavaScript.

Use requestAnimationFrame para mudanças visuais

Quando as mudanças visuais estão acontecendo na tela, você quer fazer seu trabalho no momento certo para o navegador, que é no início do frame. A única maneira de garantir que o JavaScript seja executado no início de um frame é usar requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Frameworks ou amostras podem usar setTimeout ou setInterval para fazer mudanças visuais, como animações, mas o problema é que o callback será executado em algum ponto do frame, possivelmente no final, e isso pode fazer com que percamos um frame, resultando em instabilidade.