Javascript 在滚动上更新Mapbox性能

我正在开发一个应用程序，它使用Mapbox显示路线，并允许用户通过上下滚动页面来导航路线

我正在使用一些类似于中所示的技术。比如直接用新坐标更新源，并在每次迭代中移动地图（我使用

flyTo

而不是

panTo

，因为我也会更新缩放/方位）

当使用ChromeDevTools的性能选项卡分析Mapbox的示例时，它们的帧速率看起来很棒。但是，在我的应用程序中执行相同操作时，一致性要差得多，有些帧需要50到100毫秒

正如您在屏幕截图中所看到的，有一些

requestAnimationFrame

调用不是由我的代码触发的，需要花费大量时间来执行

我在动画或Js性能改进方面的经验有限。我已经四处寻找了一段时间，尝试了很多不同的选择

该代码与以下代码非常相似：

const app = new App();

$(window).on('scroll', function(){
  app.onScroll();
});


class App {

  [...]

  onScroll() {
    this.latestScroll = window.pageYOffset;

    if(!this.ticking) {
      requestAnimationFrame(this.updateScroll.bind(this));
      this.ticking = true;
    }
  }

  updateScroll() {
    this.ticking = false;

    [...]

    if (this.shouldUpdate()) {
      this.drawPath(path);
      this.moveCamera(position, bearing, zoom);
    }
  }

  drawPath(path) {
    const geojson = {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: path
      }
    };

    this.map.getSource('route').setData(geojson);
  }

  moveCamera(position, bearing, zoom) {
    this.map.flyTo({
      center: position,
      bearing,
      zoom,
      animate: false,
    });
  }
}