文章/答案/技术大牛

发布

社区首页 >问答首页 >对于perfomance和onScroll，哪个更好？

问对于perfomance和onScroll，哪个更好？
EN

Stack Overflow用户

提问于 2019-12-31 02:13:14

回答 1查看 30关注 0票数 0

我有一个用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);
  }
}

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

谢谢。

javascript

reactjs

requestanimationframe

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-31 02:28:56

Intersection observer API是这方面的最佳选择。它比这两个选项都有更好的性能，因为它只在元素变得可见或不可见(取决于给定的阈值)时调用您的回调，并且有一个相对简单的API来引导。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59535092

复制

相似问题

问对于perfomance和onScroll，哪个更好？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于perfomance和onScroll，哪个更好？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于perfomance和onScroll，哪个更好？
EN