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

问题描述

我们有一个随机在Chrome中随机获取高内容下载时间的API，它始终在firefox中运行良好，并且只占用 ms 。响应大小为20kb未压缩和4kb压缩。

我们试过的东西：

1. 禁用 If-None-Match 标题可禁用浏览器缓存响应。 尝试各种压缩（gzip，deflate，br ）。


2. 禁用压缩。


3. 禁用所有chrome扩展。 $ b

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

   
   
   

   我们无法理解此问题的根源。有什么其他的事情可以尽量减少这个时间？

   
   
   
   
   
   

   我在这里提出了三个要求，第三个要求花了最多时间（在最后一个秒杀之前）。 CPU似乎并没有在更长的时间内达到最大化。大部分时间都是空闲时间。

   
   
   

   
   
   

   另外，使用重播XHR 菜单重播该电话时，内容下载周期将从2秒降至200 ms。

   方案

你偶然试图实现无限滚动吗？如果是，请尝试拖动滚动条而不是使用鼠标滚轮。出于某种原因，Chrome似乎很难与鼠标滚动事件。如果滚动条工作得很好，请继续阅读。

这篇文章提供了一个经历类似事情的人的详细演练 - https://github.com/TryGhost/Ghost/issues/7934

I在滚动事件中附加了一个观察者，这将触发AJAX请求。我扼杀了请求，可以看到只有1个正在发送。我看到我的开发服务器在几秒钟内返回响应，但在chrome中会有2秒的延迟。没有渲染，没有API调用，没有和脚本执行。但内容下载需要3秒14kb。没有其他浏览器有这个问题。

我偶然发现了使用 requestAnimationFrame 而不是 setTimeout 可以解决问题。当等待或绿色显着时，这种方法似乎适用，而不是内容下载或蓝色。

经过数小时的挖掘，我试着有条件地在上调用 e.preventDefault（） mousewheel 事件，令我惊讶的是，它的工作。

几件事情要注意：

1）我没有使用 mousewheel 事件来进行api调用。我使用滚动事件以及限制。

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

3）但在这种情况下，您必须观察并处理鼠标滚轮

4）您不想调用 preventDefault（）每次都会因为禁用鼠标滚动而导致:)您只希望在 deltaY 为1时调用它如果你正在使用垂直滚动。您可以从附加图像中看到，当您基本无法再滚动时， deltaY 为1。即使页面无法滚动，也会触发 mousewheel 事件。请注意，垂直滚动时 deltaX 为-0，水平滚动时 deltaY 为-0。 / p>

我的解决方案：

  window.addEventListener（mousewheel，（ e）=> {
 if（e.deltaY === 1）{
 e.preventDefault（）; 
} 
}）
  

这是我见过的唯一解决方案，我没有看到它在别处提及或讨论过。我希望这会有所帮助。

控制台日志鼠标滚轮事件

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.

Things that we have tried:

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.

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?

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.

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

解决方案

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.

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

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.

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.

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

A few things to note:

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

2) The mousewheel event is non-standard and should not be used. See https://developer.mozilla.org/en-US/docs/Web/Events/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) 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.

My solution:

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.

console log of mousewheel event

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