Get best of the week

Carregamento lento usando a API Intersection Observer

Bom dia amigos

Neste artigo, apresentaremos a API Intersection Observer, uma nova e poderosa ferramenta para carregar imagens e outros elementos lentamente em uma página, com suporte de todos os navegadores modernos. Podemos usar essa ferramenta para controlar a visibilidade dos elementos, definindo o carregamento preliminar ou atrasado do nosso conteúdo DOM.

À medida que a Web evolui, os navegadores suportam cada vez mais novos recursos e APIs, mas algo ainda prejudica os desenvolvedores - a renderização do DOM. Quando começamos a desenvolver um novo aplicativo, criamos componentes, refletimos sobre a estrutura HTML, estilizamos os elementos com CSS, também pensamos no processo de renderização, em como nossa página será exibida em geral e em algumas outras coisas importantes que exigem tratamento e afetação cuidadosos renderização de aplicativo.

Isso, por sua vez, afeta como criamos nossos elementos, como nosso CSS será organizado, quais bibliotecas e estruturas serão usadas no projeto etc. É por isso que a renderização é tão importante para os desenvolvedores.

Um dos motivos da popularidade da biblioteca React na comunidade de desenvolvedores é o fato de ele usar um DOM virtual. Em essência, esta é uma representação virtual do DOM real, que você pode controlar como desejar. Após todas as atualizações, o DOM virtual decide quais alterações precisam ser feitas no DOM original e faz essas alterações de maneira "perfeita"; não é necessário atualizar a página inteira ao alterar um elemento. Essa é uma das vantagens mais significativas do React sobre outras bibliotecas e estruturas. A renderização do DOM é uma tarefa dispendiosa (em termos de desempenho) que o React faz muito bem sem problemas.

Algumas bibliotecas e APIs nos permitem melhorar a renderização de elementos de nossos aplicativos. Vamos nos familiarizar com um deles - a API Intersection Observer. Mas primeiro, vamos descobrir o que é carregamento de imagem “preguiçoso”.

Como as imagens de carregamento lento funcionam?


O carregamento lento é uma das técnicas para renderizar o conteúdo da página. O conceito de carregamento "lento" é que, em vez de carregar completamente a página, carregamos apenas as peças necessárias e adiamos (atrasamos) o carregamento das peças restantes até que elas sejam necessárias pelo usuário.

Um exemplo de um download "lento", sobre o qual você provavelmente já ouviu falar ou que encontrou, é a rolagem infinita da página. Isso funciona da seguinte maneira: o usuário visita a página, o conteúdo inicial é carregado e, somente depois que o usuário rola a página até o final, a próxima parte do conteúdo é carregada. Nesse caso, não há necessidade de baixar todo o conteúdo de uma só vez, o que facilita muito o aplicativo.

Se um download “lento” serve para baixar apenas conteúdo “gerado pelo usuário”, como é chamada a técnica oposta? Alguns já ouviram falar de carregamento lento antes, mas nunca ouviram o contrário. O oposto do carregamento "lento" é o carregamento "energético" (outras opções são impacientes, com movimento rápido) - quando todo o conteúdo é renderizado imediatamente.

Você sabia que existem atributos HTML para carregamento lento de imagens? Para usá-los, basta adicionar loading = "lazy" ao elemento "img" ou "iframe".



Usando essa técnica, obtemos muitas vantagens: carregar apenas os recursos necessários reduz o consumo de memória e, finalmente, o tempo de carregamento da página. Também impede a renderização de código "não reivindicado", que otimiza o aplicativo para funcionar em condições de baixa largura de banda da rede. No entanto, existem algumas desvantagens: isso pode afetar o ranking da página pelos mecanismos de pesquisa. Além disso, leva algum tempo para escolher a biblioteca ou API certa para trabalhar.

API do Intersection Observer


O JavaScript está se desenvolvendo tão rápido que recebemos uma nova API quase todos os anos. O principal objetivo das novas APIs é ajudar a criar aplicativos e páginas incríveis.

O Intersection Observer é uma API que permite monitorar a visibilidade e a posição dos elementos DOM. O fato é que ele funciona de forma assíncrona, permitindo que você altere de maneira suave (imperceptível) a visibilidade dos elementos, determinando o carregamento preliminar ou atrasado do conteúdo do nosso DOM.



Alguns anos atrás, não tínhamos uma API ou outra ferramenta para posicionar e rastrear um elemento. Tivemos que escrever funções loucas e enormes, criar métodos caros (em termos de desempenho) que criaram mais problemas. Usando a API Intersection Observer, podemos fazer coisas legais como:

  • Rolagem infinita de páginas - crie rolagem infinita de tabelas, listas, contêineres de grade, etc. Nunca foi tão fácil.
  • Imagens - por que enviar todas as imagens de uma só vez, quando você pode usar o download "lento" e exibir apenas o conteúdo que o usuário precisa no momento?
  • Elementos de monitoramento - você pode monitorar os elementos na página. Por exemplo, você pode receber mensagens sobre o fechamento de anúncios.

Aqui é onde tudo começa:

let myFirstObserver = new IntersectionObserver(callback, options)

Inicializamos o construtor IntersectionObserver e passamos dois parâmetros para ele. O primeiro parâmetro é uma função de retorno de chamada, que é chamada em resposta à interseção de nosso elemento com a viewport (ou seja, quando o elemento ultrapassa os limites da viewport) ou com outro elemento. O parâmetro options é um objeto que controla as condições para iniciar a função de retorno de chamada. Este objeto possui os seguintes campos:

  • root - o elemento pai que serve como porta de visualização para o elemento de destino (para o elemento que estamos observando)
  • rootMargin - a margem externa ao redor do elemento raiz (os valores desse campo são semelhantes aos valores da margem no CSS). Esses valores podem mudar para cada lado da raiz antes de confirmar a interseção.
  • threshold - um número ou uma matriz de números que determina a porcentagem de interseção do elemento de destino com o elemento raiz, na qual a função de retorno de chamada é iniciada



Vamos dar uma olhada no uso da API Intersection Observer:

let options = {
    root: document.querySelector('.scroll-list'),
    rootMargin: '5px',
    threshold: 0.5
}

let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)

Para iniciar o "monitoramento" de um elemento, é necessário determinar o destino e chamar o observador usando o método "observe", passando o destino como um parâmetro:

let myDivTarget = document.querySelector('.header')

observer.observe(myDivTarget)

Deve-se lembrar que todos os elementos observados pelo observador são retângulos. Elementos de forma irregular se encaixam no menor retângulo.

E o suporte ao navegador? A API Intersection Observer é suportada por todos os navegadores modernos, como Chrome, Edge, Firefox e Opera.



Se você pretende trabalhar com muitos dados, por exemplo, com uma tabela contendo muitas informações, a API do Intersection Observer será extremamente útil para você.

Uma das vantagens dessa API é que, para solucionar esses problemas, você não precisa mais usar nenhuma biblioteca.

Conclusão


Estudamos a API Intersection Observer e seu uso para carregamento lento, observando a posição dos elementos DOM, etc. Os navegadores suportam cada vez mais APIs que reduzem o tempo de renderização da página, principalmente para usuários com uma conexão lenta, reduzindo o tamanho do projeto e exibindo apenas o conteúdo relevante.

De um tradutor: o artigo me pareceu insuficientemente informativo, então, aqui estão os links para a literatura adicional:


Obrigado pela atenção.

More articles:


All Articles