首页 > 其他分享> 文章详细

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

2019-10-01 05:10:02 阅读：280 来源： 互联网

标签：nginx google-chrome api api-design

我们有一个随机获取高内容下载时间的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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