chrome 中的随机高内容下载时间? [英] Random high content download time in chrome?

问题描述

我们有一个 API，它在 chrome 中随机占用大量 内容下载 时间，它在 Firefox 中始终运行良好，并且只需要几个 ms.响应大小为 20kb 未压缩和 4kb 压缩.同样的请求也可以使用 curl 正常工作.

We have an API which randomly takes high content download time in chrome, It works fine always in firefox and takes an only few ms. The response size is 20kb uncompressed and 4kb compressed. The same request also works fine using curl.

我们尝试过的事情:

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

1. Disabling If-None-Match header to disable cache response from the browser.
2. Trying various compressions (gzip, deflate, br).
3. Disabling compression.
4. Disabling all chrome extensions.

相同的请求有时在 chrome 上运行良好，但随机返回非常长的内容下载时间.

The same request works fine sometimes on chrome but randomly returns very high content download time.

我们无法了解此问题的根本原因.这次我们还可以尝试尽量减少哪些其他事情?

We are unable to understand the root cause of this issue. What are the other things we can try to minimize this time?

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

I made three requests here and the 3rd one took the most time (before the last spike). CPU does not seem to be maxing out for a longer period of time. Most of the time is idle time.

此外，当使用 Replay XHR 菜单重放呼叫时，内容下载周期从 2 秒下降到 200 毫秒.

Also, When replaying the call using Replay XHR menu, the Content download period drops from 2s to 200 ms.

推荐答案

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

Are you by chance trying to implement infinite scrolling? If you are, try dragging the scroll bar instead of using the mouse wheel. For some reason, Chrome seems to struggle with mouse scroll events. If the scroll bar worked just fine, keep reading.

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

This post provides a detailed walkthrough of someone experiencing something similar - https://github.com/TryGhost/Ghost/issues/7934

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

I had attached a watcher on the scroll event which would trigger an AJAX request. I had throttled the request and could see that only 1 was being sent. I watched my dev server return the response within a few ms but there would be a 2 second delay in chrome. No render, no api calls, no and scripts executing. But the "Content Download" would take 3 seconds for 14kb. No other browser had this issue.

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

I stumbled upon suggestions that using requestAnimationFrame instead of setTimeout would solve the problem. That approach seems that approach works when the "Waiting" or green is significant, not so much for the "Content Download" or blue.

经过数小时的挖掘，我尝试在 mousewheel 事件上有条件地调用 e.preventDefault()，令我惊讶的是，它奏效了.

After hours of digging, I tried conditionally calling e.preventDefault() on the mousewheel event and to my amazement, it worked.

注意事项:

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

1) I did not use the mousewheel event to make the api call. I used the scroll event along with throttling.

2) mousewheel 事件是非标准的，不应使用.请参阅 https://developer.mozilla.org/en-US/docs/网络/事件/鼠标滚轮

2) The mousewheel event is non-standard and should not be used. See https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

3) 但是在这种情况下，由于 chrome，您必须监视和处理 mousewheel 事件.如果其他浏览器不支持该事件，则它们会忽略该事件，而且我还没有看到它在其他浏览器中引起问题.

3) BUT in this case, you have to watch and handle the mousewheel event because of chrome. Other browsers ignore the event if they don't support it and I have yet to see it cause an issue in another browser.

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

4) You don't want to call preventDefault() every time because that disables scrolling with a mouse :) You only want to call it when deltaY is 1 if you are using vertical scroll. You can see from the attached image that deltaY is 1 when you basically can't scroll anymore. the mousewheel event is fired even though the page cannot scroll. As a side note, deltaX is -0 when you are scrolling vertically and deltaY is -0 when scrolling horizontally.

我的解决方案:

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

这是我见过的唯一可行的解​​决方案，而且我还没有在其他地方看到它提到或讨论过.我希望这会有所帮助.

That has been the only solution that I've seen work and I haven't seen it mentioned or discussed elsewhere. I hope that helps.

鼠标滚轮事件的控制台日志

这篇关于chrome 中的随机高内容下载时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！