在浏览器中滚动会导致缓慢获取（url）响应

Question

[context] - 事实证明这是无关紧要的，手头的问题是客户端的事情

我的NodeJS / Express应用程序遇到了一些奇怪的响应时间。 根据日志，请求在180-220 MS

完成

但是从网络客户端的角度来看，我看到的这些数字非常奇怪，有些数字在几秒钟之内。并且有效载荷不是那么大。它大约1.5k。

我已经禁用了我可以怀疑的所有功能，Sessions，AD身份验证等。

为了增加混乱，开销有时只有30％的请求。其他人在第一张图片中列出的相同时间范围内完成。

我希望我能提供更多上下文，但它是一个非常简单的React前端，使用从/ contacts端点获取HTTP GET数据。

没有更多。

[编辑1]

这似乎是客户方面的事情。

整个过程是虚拟/无限卷轴React组件的一部分。 如果我使用向下箭头键向下滚动，响应时间保持正常。

如果我使用滚动条/触摸快速滚动，则响应时间会增加。 重要的是要知道服务不返回更多数据，一次总是20行，但响应时间增加。

那么，在浏览器中滚动会以某种方式阻止承诺或其他更原生的构造完成吗？

[编辑2]

Chrome，Safari，Firefox的相同行为。 快速滚动似乎使请求无法及时完成。 升级到React 16似乎改善了这个问题，或者只是误报。

[编辑3]

即使将在线后端的调用替换为静态JSON服务也是如此。行为仍然存在，因此这与Express或NodeJS无关。

滚动和React + Fetch有些奇怪。

[编辑4]

客户端代码段：

事件监听器

this.scrollHandler = this.checkWindowScroll;
this.resizeHandler = this.checkWindowScroll;

window.addEventListener("scroll", this.scrollHandler, { passive: true });
window.addEventListener("resize", this.resizeHandler, { passive: true });

的scrollHandler

 //check if we have scrolled to the bottom of the screen
 checkWindowScroll = () => {
  if (this.state.loading) {
    return;
  }
  const trigger = 800;
  const pageBottom =
    window.document.body.getBoundingClientRect().height - trigger;

  const scrollBottom = window.pageYOffset + window.innerHeight;

  if (scrollBottom > pageBottom) {
    this.loadMore();
  }
};

获取下一个数据

//responsible for fetching another chunk of data from a backend
async loadMore() {
  this.setState({ loading: true, error: undefined }); // begin load
  const items = await this.props.fetchData(
    this.search,
    this.state.items.length
  );

  this.setState(
    {
      loading: false,
      error: undefined,
      items: [...this.state.items, ...items] // clone
    },
    () => this.checkWindowScroll() // once state is updated, check again if we need more data
  );
}