Otimização é o foco para conquistar o usuário
Como já sabemos, otimização é um assunto recorrente, mas necessário. A otimização está diretamente ligada à experiência que o usuário tem da sua aplicação. Por isso, nada melhor do que dar uma atenção extra a esse tópico.
Quando estudamos o básico de JavaScript, aprendemos que ele pode proporcionar uma experiência bastante dinâmica para nossas aplicações, assim como também aprendemos que ele é interpretado pelo navegador dos usuários que acessam as nossas aplicações. Sendo assim, é importante pensar em otimização desde o começo do desenvolvimento dos nossos projetos, evitando que nosso código não traga ineficiências e se torne uma catástrofe futuramente.
A seguir, apresentarei uma série de boas práticas que podem trazer uma melhor performance para as nossas aplicações:
Inicializar variáveis de instância
Adicione a instância das variáveis de declaração/inicialização/instância no próprio protótipo para as variáveis dos seguintes tipos de dados: valores do tipo numérico, booleanos, nulos, indefinidos ou strings. Fazendo isso, estamos evitando a execução do código de inicialização desnecessário toda vez que o construtor for chamado.
Vale lembrar que isto não poderá ser feito para variáveis de instância do qual o valor inicial é dependente de argumentos para o construtor.
Exemplo, no lugar dessa versão:
brazilJS.Conf = function() { this.participantes = 1600; this.maiorConferenciaJavaScriptMundo = true; this.agenda = []; this.slogan = 'A BrazilJS Conf é a maior conferência JavaScript do mundo.'; }; Poderíamos ter uma versão melhorada, como esta:
brazilJS.Conf = function() { this.agenda = []; }; brazilJS.Conf.prototype.participantes = 1600; brazilJS.Conf.prototype.maiorConferenciaJavaScriptMundo = true; brazilJS.Conf.prototype.slogan = 'A BrazilJS Conf é a maior conferência JavaScript do mundo.'; Definindo métodos de classes
O código a seguir é ineficiente, pois toda vez que instanciamos brazilJS.Conf, uma nova function e uma closure serão criadas:
brazilJS.Conf = function() { // corpo do nosso constructor this.slogan = function() { // corpo do método console.log('A BrazilJS Conf é a maior conferência JavaScript do mundo.'); }; } Com essa nova abordagem, não importa quantas vezes instanciamos brazilJS.Conf, apenas uma única function será criada para slogan e nenhuma closure será criada, vejamos:
brazilJS.Conf = function() { // corpo do nosso constructor }; brazilJS.Conf.prototype.slogan = function() { // corpo do método console.log('A BrazilJS Conf é a maior conferência JavaScript do mundo.'); }; Cuidado com as armadilhas das closures
Por mais poderosas e úteis que as closures sejam, elas podem nos trazer algumas desvantagens como podemos verificar abaixo.
A criação de uma closure é significativamente mais lenta que a criação de uma function sem uma closure e é muito mais lenta do que a reutilização de uma função estática. Por exemplo:
function exemploAlertaTimeOut() { let mensagem = 'braziljs.org'; window.setTimeout(function() { alert(mensagem); }, 100); } É mais lento que:
function exemploAlertaTimeOut() { window.setTimeout(function() { let mensagem = 'braziljs.org'; alert(mensagem); }, 100); } Que ainda é mais lento do que:
function alertaMensagem() { let mensagem = 'braziljs.org'; alert(mensagem); } // function exemploAlertaTimeOut() { window.setTimeout(alertaMensagem, 100); } Isso acontece pois as closures acrescentam um nível para a cadeia de escopo que será verificada pelo navegador. Vejamos mais um exemplo:
var nome = 'braziljs.org'; function funcaoComClosure() { var slogan = 'A BrazilJS Conf é a maior conferência JavaScript do mundo.'; return function () { var participantes = 1600; nome; slogan; participantes; }; } var teste = funcaoComClosure(); teste(); Assim que a função teste() for invocada, a referência à variável nome será mais lenta do que referenciar à variável slogan, que ainda será mais lenta que a referência à variável participantes. Conclusão Essa foi uma breve introdução sobre alguns tópicos importantes relativos à otimização. Se você ficou curioso e quer aprender mais, dê uma atenção para os seguintes tópicos: Otimização de imagens Minificação de JS e CSS Redução de latência com o uso de uma CDN Cache Web Font Performance HTTP/2