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