Tenha performance

Você já entrou em um site afim de comprar, ler algo ou resolver algum problema como sacar dinheiro né?! E eu tenho certeza que se você estava apressado e se o site era lento, você sentiu uma grande vontade de desistir de fazer o que estava fazendo não é isso? Pois é eu mesmo já passei muito por sites lentos, por mais util que seja ou por mais excelente que seja o serviço deles a vontade continua de sair o mais rápido possível do site.

A grande dificuldade de um desenvolvedor

Nós que somos desenvolvedores sabemos o quão chato é ter que repetir códigos, e mais chato ainda ter que digitar códigos longos, isso facilita até o erro da parte do desenvolvedor, já que terá que desenvolver complexos códigos, e assim a unica saida que teriamos é usando algo que nos facilitasse, e isso é o que chamamos de bibliotecas ou usamos frameworks para facilitar o nosso desenvolvimento e isso ajuda muito no desenvolvimento em pouca fração de tempo e criar algo magnifico.

Mas você já teve aquela esperiencia de ao desenvolver algo perfeito, e ao fim de tudo notar que a sua velocidade não está boa? eu já passei por isso e basicamente, eu ignorei... mas de um tempo notei a responsabilidade que tem um desenvolvedor, ele é o responsável por total sucesso ou total derrota do que vá fazer, seja uma empresa uma campanha ou qualquer coisa que precise de seu trebalho, e então resolvi mudar minhas atitudes, e mesmo depois de mudar minha forma de desenvolver(Sem usar bibliotecas ou framework, que tomou muito o meu tempo).

Notei uma diferença, mas eu questionava ainda assim, o tempo ainda era meu grande inimigo, meus sites sempre demoravam ao carregar e notei que não é a quantidade de esforço que faz, mas sim como os motores gráficos e JS são lidos no frontend, então notei que eu era o inimigo do GPU no processamento de imagens, e dos diversos motores JS.

Conheça seu inimigo

Vamos iniciar a conhecer o gráfico, o que será o motor css? como será que ele processa toda as imagens? Para a interpretação da parte gráfica em sí é bastante organizado e dividido.

Ele pega toda a estrutura e cria uma tipagem semelhante a uma arvore, dividindo processos filhos e irmãos, todo o HTML cria pequenos labels sim, e de uma forma bem simples, ele transforma assim já para seu CSS atingir a página e fazer alterações, este é o mesmo seletor que você usa quando quer fazer um .center(este código seleciona a classe que está no HTML) sabendo disso fica até facil entender, nesta semana li um artigo escrito por Brunno Pleffken Hosti onde explica de uma forma bastante detalhada sobre como é a leitura e a coloração da tela para o cliente, eu indico essa leitura, mas resumidamente

Renderização da tela

Para a renderização do css são usados variados motores dependendo de qual seja o browser a utiliza-la mas, irei pegar o WebRender para usar aqui como exemplo. O WebRender nem se quer ainda foi lançado, mas é o que será mais rápido trazendo novas tecnologias, e como estamos falando de modernidade, eu não poderia falar de um browser antigo, já que após o lançamento do WebRender creio que o Google Chrome e outros grandes browsers farão refatorações nos códigos para que a renderização seja melhor.

Ele funciona em diferentes etapas como eu já falei antes, ele passa pelo processo de tipagem e entrega tudo mastigado e rápidamente, para que ele seja exibido na tela ele envia e é processado pelo GPU, nos navegadores atuais é mapeado de uma forma triangular, para que seja carregado, ele é calculado de uma forma de matriz inversa, que seria triangulação, até que a parte gráfica esteja pronta e carregue, já atualmente o motor Blink do Google Chrome e o Gecko do Firefox (Cito por serem os mais usados hoje em dia no Brasil) renderizam apenas o calculada pelo tamanho da resolução, assim faz com que a máquina venha economizar memória e carregar outros componentes mais rápido, e ao descer a página ele calcula da mesma forma, dentro da área de visão.

Já o WebRender calculará na estrutura de modelo atómico, criará como vários objetos, como átomos em sí, cada qual carregando algo como um json, mas levará dessa forma óbvio em valores hexadecimais, para que seja processado pelo GPU, e só esse processo fará com que a performance dê um enorme salto, já que ela não estará sujeita a mudanças de triangulações.

Motor JS

Não diferente da renderização dos browsers o motor JS também possui suas singularidades, dentro de todos os motores o mais performático é o chamado de V8, ele funciona passando por alguns processos.

Como vemos o JS passa por 7 processos, o que faz com que seja um pouco mais dificil de fazer com que ele seja executado pelo seu relativamente longo processo, e ainda considerando que sua tipagem é relativamente pouca, e isso termina fazendo ele não ser tão performático, mas tenho certeza que se você desenvolve em JS provavelmente não tenha notado diferença em sua performance, já que os browsers priorizam o seu processamento

Os outros browsers que não utilizam o V8 são óbviamente menos performático, vejamos qual o efeito que uma biblioteca simples causa em nosso carregamento, vejamos o Jquery(Já em que iremos criar uma solução).

No caso o processo icluirá mais um nível de abstração que ao invés de sua entrada de códigos será as várias funções contidas no Jquery, ficando o sucessivamente assim:

(Seus códigos) → (Funções em JS do Jquery) → (Criação de tipagens) → (Arvores de sintaxes) → (Bytecode) → (Pegar feedback) → (Compilação) → Execução de código otimizado "UFFAA!!!"

Vendo assim notamos que uma forma bastante interessante que poderiamos fazer pra melhorar a nossa performance não é?! Mas antes vamos dar uma uma pequena analizada em como funciona o Jquery então.

O Jquery é um biblioteca orientada a objetos que funciona baseada em funções responsávei por facilitar o desenvolvimento, e ajuda bastante no desenvolvimento ágil, eu quem o diga! E a função principal dela é invocada usando o $, todos os elementos selecionados usando esta função retorna uma estrutura de objeto jquery(que é algo como um array), mas para que isso aconteça, existem várias funções que são invocadas funções dentro de funções, fazendo assim com que o browser tenha que execer um maior trabalho para que processe o seu JS.

Jquery é tão conhecido quando o JS, quando aprendi, uma das primeiras coisas foi "Javascript & Jquery", para mim era tudo a mesma coisa e seria impossível largar o Jquery, e o eu fiquei tao dependente quando vários outros desenvolvedores, para fazer uma conexão XHR sem o Jquery para mim era algo absurdamente impossível por exemplo, e ainda mais impossível fazer efeito de rolagem suave, ou efeito scroll, mas levando tudo isso em conta, vamos aos códigos.

Mão na massa

Publiquei um artigo onde falava de como fazer efeito scroll em uma linha de código css! Mas, ao fazer vários testes notei que funcionou em todos os navegadores, exceto no mais usado(que é o Google Chrome, com 79.8% de uso no Brasil) e, sim somos desenvolvedores mas o nosso cliente não tem culpa de seu browser não possuir suporte a não ser que instale um complemento(o que se eu fosse acessar um site que me pedisse isso eu nunca instalaria este plug, só pra acessar seu site), então após muitos estudos cheguei a esse resultado, eu e o Suissa tentamos por muito tempo encontrar algo, me juntei com meu amigo Nicolas Ramos decidimos então dedicar todo esse tempo de estudo, e encontrar qual a forma o Jquery consegue fazer esse efeito.

Show me the code

E pesquisando bastante cheguei a esse "rascunho" do CSSWG que mostrava um json que existia, nada esclarecedor e após procurar bastante, vi essa funcionalidade que na verdade já existia a muito tempo que é o scroll, porém, ela de forma aprofundada é o que ainda não conheciamos.

Estava olhando as especificações, quando vi que é possível configurar como queremos nosso scroll, e já notei que era possível e era esse o caminho e era apenas criar objetos que o configurem, e, olha no que deu.

Só em ver esse código funcionando eu já tive um ataque fuminante de alegria, mas vamos aos detalhes desse código.

Esta função scroll é a que faz com que este elemento seja rolado conforme diz nesse artigo da MDN, mas a diferença é que as várias vezes que li esse artigo, ele não explica nem a possibilidade de acrescentar objetos, e isso justifica a não utilização desse recurso.

Aperfeiçoando

Agora que você viu na prática como funciona, vamos olhar uma forma prática de fazer isso em uma função(no caso um botão de "voltar ao topo"), dá uma olhada nesse código