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:


BrazilJS é uma iniciativa NASC