在HTML/CSS/JavaScript中渲染NewSticker的最佳方法

Question

我们在HTML页面的底部有一个股票程序，显示出新闻，就像电视上的新闻报名人一样。目前，我们使用requestAnimationFrame为此，我们会体验到它并不总是很好的动画，我想知道是否有人知道这是最佳实践。

首先，我们尝试在Raspberry Pi上运行它，无论尝试什么，它都无法很好地渲染它。

其次，我们在Chrome浏览器的Windows PC中运行它，并且通常运行效果很好，但是如果我们在同一页面上播放高分辨率视频，那么股票的渲染就会变得很懒惰。

我知道它是在争夺资源，但是对股票代码进行动画不应需要很多资源，因此我认为应该有一个解决方案。

这是我们当前的代码。它是打字稿，而不是简单的JavaScript，但是我的问题不是在我当前代码中的详细信息中进行故障排除，而是关于找到我认为与我们现在所做的最佳方法的最佳方法：

  private startTicker() {
    const ticker = document.getElementById(`RssTickerContainer_${this.props.rssTicker?.rssTicker?.url}`);
    if (!ticker || !this.state.items || this.state.items.length === 0) {
      setTimeout(() => {
        if (this.props.rssTicker?.rssTicker?.url) {
          // try to fetch rss content again after 1 second
          this.getRssFeed(this.props.rssTicker?.rssTicker?.url, true);
        }
      }, 1000);
      return;
    }
    console.log("Starting RSS ticker");
    const startPosition = this.state.leftPosition;
    let leftPosition = startPosition;
    let lastFrameCalled = performance.now();
    let fps = 0;
    this.animationFrameID = requestAnimationFrame(() => this.animateTicker(lastFrameCalled, fps, startPosition, leftPosition, ticker));
  }

  private animateTicker(lastFrameCalled: number, fps: number, startPosition: number, leftPosition: number, ticker: HTMLElement) {
    // calculate fps
    const timeSinceLastFrame = (performance.now() - lastFrameCalled) / 1000;
    lastFrameCalled = performance.now();
    fps = 1 / timeSinceLastFrame;
    const containerWidth = ticker.getBoundingClientRect().width;
    if (containerWidth <= 0) {
      // no content, component probably has unmounted
      return;
    }
    if ((leftPosition * -1) > containerWidth) {
      // when leftPosition (inversed, since has negative value) is greater than containerWidth,
      // this means that all elements has passed the screen so we restart the ticker
      console.log("Restarting RSS ticker");
      leftPosition = startPosition;
      ticker.style.left = leftPosition + "px";
      this.getRssFeed(this.props.rssTicker?.rssTicker?.url);
    } else {
      const timeToCross = 25;
      // use fps to set the new position to avoid slow animations on weaker devices
      const step = window.innerWidth / timeToCross / fps;
      leftPosition = leftPosition - step;
      ticker.style.left = leftPosition + "px";
    }
    this.animationFrameID = requestAnimationFrame(() => this.animateTicker(lastFrameCalled, fps, startPosition, leftPosition, ticker));
  }