Performance no scroll com IntersectionObserver

Conhecendo o IntersectionObserver

Temos várias técnicas para tratar da performance na rolagem de uma página web, entre elas:

• Image Resizes/Expensive Styles
• Debouncing Scroll Event Calls
• will-change
• Passive event listeners

Entre elas a mais importante é o IntersectionObserver, neste artigo iremos conhecer melhor essa implementação e os benefícios que ela traz :)

É comum no javascript a necessidade de implementarmos o evento scroll, porém, poucos fazem isso de forma correta, esse é um evento muito delicado, é chamado em cada alteração de pixel, então se você precisa verificar se um objeto está visível na tela e decidir utilizar um addEventListener(“scroll”, func) é quase certo que terá um caso de layout trasting.

Para evitar constantes leituras na Dom Tree, existe o IntersectionObserver.
É preciso criar uma instância de um Observer, e depois atribuir elementos ao observador. Abaixo descrevo um exemplo de sua utilização:

       var observador = new IntersectionObserver(function(entries) {
            entries.forEach(function (entry) { //loop em todos os elementos atingidos
                const {isIntersecting, intersectionRatio} = entry;
                if (isIntersecting === true || intersectionRatio > 0) {
                   console.log( entry.target );
		   // entry.boundingClientRect 
		   // entry.intersectionRatio
 		   // entry.intersectionRect 
		   // entry.isIntersecting
 		   // entry.rootBounds 
		   // entry.time
                   observador.unobserve(entry.target); // se você só precisar do event uma vez utilize essa linha
                }
            });
        }, {
			rootMargin: '400px'
		});

  //iniciando o opservador para #myDiv
  observador.observe(  document.querySelector(‘#myDiv’)  );

No exemplo sempre que o elemento com o ID myDiv, chegar próximo de 400px da viewport ele aparecerá no console.

Alguns atributos podem ser passados para o Observador, são eles:

root:
Elemento inicial para observação, ele irá buscar os objetos filhos de root, esse é um atributo muito importante, quanto mais abaixo o elemento estiver na Render Tree menor o uso de memória e consumo de CPU

rootMargin:
Margem de segurança para o observador, se sua tela tem 500px, e vc define uma margem de 100px, o observador vai considerar a área de visão como tendo 600px.

threshold:
Indica em qual porcentagem da visibilidade do alvo o retorno de chamada do observador deve ser executado. Se você quiser apenas detectar quando a visibilidade ultrapassar a marca de 50%, você poderá usar um valor de 0,5.

Deixando de observar

observador.unobserve(element);

Desligando o observador

Conclusão

O momento do scroll é um dos mais delicados em um produto Web, nele o cliente nos mostra que quer mais do produto, portanto todo cuidado nesse momento é pouco, leia com cuidado a documentação e evite uma quantidade excessiva de manipulações ou leituras no DOM.