Síncrono vs. Assíncrono

Uma coisa importante é saber diferenciar algo síncrono de algo assíncrono.

Num disparo síncrono, uma coisa acontece depois da outra, ou seja, quando uma finaliza, a outra inicia. O fato de lavar uma pilha de pratos pode ser um bom exemplo, não há como lavar vários pratos por vez, apenas um de cada vez, consumindo a pilha aos poucos. No disparo de um método JavaScript na WEB, no modelo síncrono pode travar o navegador, já que este ficará esperando pelo término da execução do método.

Pense num cálculo de números primos. Por exemplo, quero calcular 1.000.000 de números primos. Enquanto não encontrar o último número, o browser não vai responder.

Já num disparo assíncrono, os métodos são chamados em paralelo, executando ao mesmo tempo e deixando o site fluido. Isso pode ser usado para métodos e até mesmo para carga de arquivos JavaScript por demanda. Um ponto de atenção neste modelo, é que se um método precisar de um dado processado por outro, esses métodos precisam estar sincronizados, caso contrário, corre-se o risco de ter um valor incorreto do processamento ou até mesmo um erro.

Lazy Load

Também conhecido como “carregamento preguiçoso” é uma técnica que atrasa a carga de um objeto para o momento em que ele aparece no campo de visão do usuário.

Imagine um site de compras com centenas ou até mesmo milhares de imagens de produtos. Se todas as imagens fossem carregadas de uma única vez, a carga da página seria extremamente lenta, desta forma, o uso da técnica de Lazy Load favoreceria o desempenho. Conforme o usuário vai rolando a página as imagens vão sendo carregadas.

Outrossim, existem no mercado várias bibliotecas JavaScript que dão um dinamismo e deixam essa carga mais atraente, dando ao usuário uma experiência fluida na navegação do site.

Importante salientar que essa técnica deve ser bem aplicada, pois devemos ter a garantia de que as imagens são mostradas para os usuários no momento certo. Uma dica é constantemente fazer validações na página para verificar esse comportamento.

Para saber mais

O Orion Bezerra apresentou um BE.TECH sobre o assunto, para assisti-lo acesse o vídeo abaixo:

Além disso, no BE.TECH o Orion menciona um vídeo da Tecnologia que dá dicas sobre o Lazy Load, confira:

E se você quiser uma dica de biblioteca, pode usar a ccforward.

Nesse BE.TECH duas perguntas ficaram sem resposta:

• Como você lida com cache de navegador quando o cache está com uma versão antiga dos recursos que você está carregando? Tem como detectar isso?

  • Uma maneira de lidar é com o método Reload(), porém em algumas situações as funções assíncronas podem ser implementadas e salvas no cache do navegador para aumentar a rapidez da aplicação. Com o monitor de recursos do DevsTool do navegador é possível detectar. 

• Referente ao carregamento de imagens é possível utilizar um diretório de imagens e no componente importar essa imagem, não sei se teria o mesmo desempenho ou delay isso utilizando no React?

  • Não teria muito ganho se pensarmos em carregamento assíncrono, o ideal seria utilizar as bibliotecas do JavaScript para termos um ganho real com o carregamento de imagens.

Gostou deste post? Deixa seu comentário, te vejo na próxima publicação, um abraço,

Danton C. Franco Junior

#TimeTec