api – chrome的随机内容下载时间很长？

我们有一个随机获取高内容下载时间的API,它在firefox中运行良好,只需几毫秒.响应大小为20kb未压缩和4kb压缩.使用curl,同样的请求也可以正常工作.

我们尝试过的事情：

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

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

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

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

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

解决方法:

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

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

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

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

经过几个小时的挖掘,我尝试在鼠标滚轮事件上有条件地调用e.preventDefault(),令我惊讶的是,它有效.

有几点需要注意：

1)我没有使用mousewheel事件来进行api调用.我使用了滚动事件和限制.

2)鼠标滚轮事件是非标准的,不应使用.见https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

3)但在这种情况下,由于镀铬,您必须观察并处理鼠标滚轮事件.其他浏览器会忽略该事件,如果他们不支持它,我还没有看到它导致另一个浏览器出现问题.

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

我的解决方案

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

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

console log of mousewheel event

标签：nginx,google-chrome,api,api-design
来源： https://codeday.me/bug/20191001/1837788.html