Api chrome中的随机高内容下载时间？

我们有一个API，它可以在chrome中随机花费大量的

内容下载时间，在firefox中总是可以正常工作，并且只需要几毫秒。响应大小为20kb未压缩和4kb压缩。使用curl也可以很好地处理相同的请求

我们尝试过的事情：

禁用
如果没有匹配的
标题以禁用浏览器的缓存响应

尝试各种压缩（gzip、deflate、br）
禁用压缩
禁用所有chrome扩展
同样的请求有时在chrome上运行良好，但随机返回非常高的内容下载时间

我们无法理解这个问题的根本原因。这次我们还可以尽量减少哪些事情


我在这里提出了三个请求，第三个请求花费了最多的时间（在最后一个峰值之前）。CPU似乎不会在较长时间内达到最大值。大部分时间是空闲时间


另外，当使用
Replay XHR
菜单重播通话时，内容下载时间从2秒缩短到200毫秒。
我认为您可能做错了。™

从根本上说，如果这只发生在Chrome上，那么可能是客户端代码造成的，您不会透露任何细节

否则，您将尝试使用前端工具调试作为后端条件显示的内容（基于nginx标记上的选择）：


您是否尝试使用来解决问题？交换什么包，在什么时间

您是否尝试记录nginx接收和处理请求的时间？例如：

服务器在哪里？也许您正在经历数据包丢失，这可能需要超时和重新传输某些TCP数据包，这必然会引入随机延迟


最后，最后一种可能性是，该字段的含义与您认为的不同——听起来它可能会受到CPU负载的影响，因为这是
XMLHTTPRequest
（
XHR
）处理的结果——也许您在运行一些带有用户跟踪的广告时会随机消耗大量CPU，降低您的指标？
您是否碰巧尝试实现无限滚动？如果是，请尝试拖动滚动条，而不是使用鼠标滚轮。出于某种原因，Chrome似乎在与鼠标滚动事件作斗争。如果滚动条工作正常，请继续阅读

这篇文章提供了一个有类似经历的人的详细演练-

我在
scroll
事件上附加了一个监视程序，它将触发一个AJAX请求。我已经阻止了请求，并且可以看到只发送了1个请求。我看着我的开发服务器在几毫秒内返回响应，但是chrome会有2秒的延迟。没有渲染，没有api调用，没有脚本执行。但“内容下载”需要3秒钟才能下载14kb。没有其他浏览器存在此问题

我偶然发现，使用
requestAnimationFrame
而不是
setTimeout
可以解决这个问题。这种方法似乎在“等待”或绿色很重要的情况下有效，而在“内容下载”或蓝色的情况下效果不太好

经过数小时的挖掘，我尝试有条件地调用
mouseweel
事件中的
e.preventDefault（）
，令我惊讶的是，它居然成功了

需要注意的几点：

1） 我没有使用
mouseweel
事件进行api调用。我使用了
滚动
事件和节流

2） 
mouseweel
事件是非标准事件，不应使用。看

3） 但是在这种情况下，由于chrome，您必须观看并处理
mouseweel
事件。如果其他浏览器不支持该事件，则会忽略该事件，我还没有看到它在其他浏览器中导致问题

4） 您不想每次都调用
preventDefault（）
，因为这会禁用鼠标滚动：）如果使用垂直滚动，您只想在
deltaY
为1时调用它。您可以从所附的图像中看到，当您基本上无法再滚动时，
deltaY
为1。即使页面无法滚动，
mouseweel
事件也会触发。作为旁注，
deltaX
在垂直滚动时为-0，
deltaY
在水平滚动时为-0

我的解决方案：

window.addEventListener("mousewheel", (e) => {
    if (e.deltaY === 1) {
        e.preventDefault();
    }
})

这是我见过的唯一可行的解决方案，我没有在其他地方提到或讨论过。我希望这有帮助

我相信这与Chrome功能（被动事件监听器）有关，该功能旨在避免在监听touchmove等移动事件时工作-添加任何“mousewheel”事件监听器为我解决了这一问题（即使回调是空函数）