Debounced mobile viewport fetching

[francishagecode]

Hi

The base viewport prefetching can be quite 'expensive' for alot of cases on mobile. Instead, I am making use of something similar to the below:

const isVisibleInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  const margin = 50;
  return (
    rect.top >= margin &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) - margin &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
const handleScrollEnd = () => {
  console.log('Scroll end');
  clearTimeout(scrollEndTimeout);
  scrollEndTimeout = setTimeout(prefetchVisibleLinks, 500);
};

const prefetchVisibleLinks = () => {
  console.log('Prefetching visible links');
  links.forEach((link) => {
    if (isVisibleInViewport(link)) {
      prefetchLink(link.href);
    }
  });
};

This accomplishes:

• Only content within the window (with a margin set, so not just in view) is fetched
• Content is only fetched when user stops scrolling for X time (ideally, this can easily be configured)

This is working really nicely for mobile, and I would love this to be a base feature / option.

• The user could define the 'delay' or waiting time before the callback is sent.
• The user could define the margin of the viewport, so 'edge' content is excluded

What are your thoughts on this? Thanks!

[spaansba]

Thanks a lot for the suggestion and thought you put into this. The main concern with using getBoundingClientRect is that it can trigger reflows which can be quite costly in some scenarios. That’s why in foresight we rely on IntersectionObserver. With it we can achieve a very similar effect by configuring a rootMargin, but without causing any reflows.

As for the scroll timeout idea I think it is interesting. I am not completely sure how useful it would be in practice since in most cases prefetching visible links is already gated by the observer events themselves. But it is definitely worth keeping in mind as we continue refining the library.

Really appreciate you taking the time to share this feedback.