如何解决Ajax内容下载时间慢的问题

前言：

今天，本文介绍如何解决ajax内容下载速度慢的问题。

事件背景：

开发人员给了我一个bug，ajax很慢。定位后，速度慢的原因是内容下载时间太长，chrome有2s延迟，在我们的手机客户端也证明了同样的延迟。截图如下：

流程分析：

1.定位原因：

首先看到这个延迟，第一反应就是这不是前端bug，反馈给后端学员。但是，通过后端定位，发现接口的反馈时间非常快。翻看国外文献，证明这是浏览器事件不规范导致的bug。

2 .错误分析：

通过与开发学生的交流，我发现bug有两个特点。首先，这种延迟只存在于上拉加载导致ajax请求的情况下，在统一环境和浏览器下延迟时间在2-3s之间相似。

第二，虽然一些被拉起并加载的组件也会触发ajax，但是没有延迟。

于是我们开始了前端，原因的定位，首先我们找到了理解的点：因为我们的项目架构设计，所有的上拉负载都是由一个基本的组件pagger完成的，它的一些代码如图所示。其原理是通过浏览器的滚动事件和调整大小事件不断检查组件是否在可见区域，如果在，触发hasMore函数。

其次，检查延迟调用业务页面和无延迟调用业务页面调用这个组件的区别。

相比之下，这两种成分没有区别。(所以有兴趣的同学可以联系我讨论这个谜团。我可以把源代码发给你)

反复重现问题后，很明显在pc的chrome中，使用触控模式的延迟偶尔会消失，而使用鼠标滚轮的延迟会重新出现。因此，问题出在mousewheel事件及其相应的scroll事件上。

错误解决方案：

结合上诉理由，通过对几个帖子的讨论，得出以下结论：

1.1.chrome浏览器的mousewheel事件是造成这种延迟的原因(mousewheel事件不是标准事件，不建议所有人使用)，当然！我在代码中没有使用mousewheel事件，但是使用scroll事件可能会导致mousewheel事件冲突，而我们特色手机客户端中的webview不幸也撞上了这个缺陷。

2.要解决这个问题，可以尝试监听这个事件(如果浏览器没有这个事件，就不会响应这个监控，也没有冲突)，当事件被触发时，取消其所有默认行为：

因此，通过监视其事件模型的deltaY，当它有垂直位移时，会触发preventDefault，因此代码如下：

window . addeventlistener(' mouse wheel '，(e)={ if(e . deltay===1){ e . preventdefault()；}})将此代码添加到前端基础库的页面初始化代码中，神奇地发现相关页面内容-下载延迟问题得到了解决。

总结：

兼容性问题的本质：

在webkit架构中，有些模块在浏览器中一般是不共享的，有些模块有一些在浏览器中不共享的特性，可以通过不同的编译配置来改变它们的行为。因此，许多使用webkit的浏览器可能会显示不同的行为。

以上就是边肖介绍的Ajax内容下载时间慢问题的解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！