Intersection Observer & Efficient Scroll Handling

How can you optimize performance when observing many elements simultaneously?

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      observer.unobserve(entry.target);
      loadImage(entry.target);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Create multiple observers
Use lower threshold values
Unobserve elements after handling them
When observing many elements, it's important to unobserve elements after their intersection has been handled to optimize performance. This approach: 1) Reduces the number of elements being actively observed, 2) Prevents unnecessary callback executions for elements that have already been processed, 3) Frees up browser resources, 4) Is particularly important for lazy loading implementations where you don't need to keep tracking elements after they're loaded. The example code demonstrates this pattern with image lazy loading, where each image is unobserved after its src is set.
Increase rootMargin

Next Question (8/20)