随机的高内容下载时间？

Question

我们有一个随机需要花费大量content download时间在Chrome上的API ,它在firefox中运行良好并且只需要少量ms.响应大小为20kb未压缩和4kb压缩.使用curl,同样的请求也可以正常工作.

我们尝试过的事情:

1. 禁用If-None-Match标头以禁用浏览器的缓存响应.
2. 尝试各种按压(gzip,deflate,br).
3. 禁用压缩.
4. 禁用所有Chrome扩展程序.

相同的请求有时在chrome上工作正常但随机返回非常高的内容下载时间.

我们无法理解此问题的根本原因.我们可以尝试最小化这个时间的其他事情是什么？

我在这里提出了三个请求,第三个请求占用了最多(在最后一个峰值之前).CPU似乎没有在更长的时间内达到最大化.大部分时间都是空闲时间.

此外,使用Replay XHR菜单重播呼叫时,内容下载时间从2秒降至200毫秒.

Answer 1

您是否偶然尝试实现无限滚动？如果是,请尝试拖动滚动条而不是使用鼠标滚轮.出于某种原因,Chrome似乎很难用鼠标滚动事件.如果滚动条工作正常,请继续阅读.

这篇文章详细介绍了遇到类似事情的人 - https://github.com/TryGhost/Ghost/issues/7934

我在scroll事件上附加了一个观察者,它会触发一个AJAX请求.我已经扼杀了请求,可以看到只有1个被发送.我看到我的开发服务器在几毫秒内返回响应,但是铬会有2秒的延迟.没有渲染,没有api调用,没有和脚本执行.但"内容下载"需要3秒才能达到14kb.没有其他浏览器有此问题.

我偶然发现了使用requestAnimationFrame而不是setTimeout解决问题的建议.当"等待"或绿色显着时,这种方法似乎有效,而不是"内容下载"或蓝色.

经过几个小时的挖掘,我试着有条不紊地呼吁e.preventDefault()这个mousewheel事件,令我惊讶的是,它奏效了.

有几点需要注意:

1)我没有使用该mousewheel事件进行api调用.我使用了这个scroll事件以及限制.

2)该mousewheel事件是非标准的,不应使用.请参阅https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

3)但在这种情况下,你必须观察和处理mousewheel事件,因为铬.其他浏览器会忽略该事件,如果他们不支持它,我还没有看到它导致另一个浏览器出现问题.

4)你不想preventDefault()每次都打电话,因为它禁止用鼠标滚动:) deltaY如果你使用垂直滚动,你只想在1 时调用它.deltaY当您基本上无法滚动时,您可以从附加的图像中看到1.mousewheel即使页面无法滚动,也会触发该事件.作为旁注,deltaX当您垂直deltaY滚动时为-0,水平滚动时为-0.

我的解决方案

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

这是我见过的唯一解决方案,我没有看到它在其他地方提到或讨论过.我希望有所帮助.

鼠标轮事件的控制台日志