javascript - 性能动画Frame和onScroll哪个更好？

Question

我有一个用 React 创建的选框元素。我希望当元素不可见时选取框停止。

这是我用于检查可见性的代码:

const isVisible = () => {
  const rect = marqueeRef.current.getBoundingClientRect();
  const elTop = rect.top;
  const elBottom = rect.bottom;
  const visible = elTop < wHeight && elBottom >= 0;
  return visible;
};

我想知道什么对性能更好:

a.让动画帧运行并每次检查该元素是否可见。

const animate = () => {
  if (isVisible()) {
    i = i < width ? i + step : 0;
    marqueeRef.current.style.transform = `translateX(${-i}px)`;
  }
  aF = requestAnimationFrame(animate);
};

或

b.创建一个 onScroll 处理程序来检查元素是否可见，然后启动和停止动画帧。

const onScroll = () => {
  if(isVisible()){
    animate();
  }else{
    cancelAnimationFrame(aF);
  }
}

两种方式都会不断检查元素是否可见，所以我想知道是否有人有这方面的经验，并且可以阐明哪种方式的性能会更好。

谢谢。

Answer 1

Intersection observer API非常适合这个。它比这两个选项具有更好的性能，因为它仅在元素变得可见或不可见(取决于给定阈值)时调用回调，并且具有相对简单的 API 来启动。