关于ajax的content-download时间过慢问题的解决方案与思考

前言：

 

作前端架构好久好久了，常常到我这里都是些棘手的问题，以前没有养成很好的记录问题的习惯，之后会努力成文，积累。

因而今天就有个这篇文章。关于ajax的content-download时间过慢问题的解决与思考

 

事件背景：

 

开发人员反馈给我一个bug，ajax相应速度很慢，通过定位，速度慢的缘由在于，content-download时间过长，在chrome中有2s+的延迟，后证明在咱们的手机客户端里也有这一延迟。截图以下：

 

 

 

过程分析：

1.定位缘由：

首先，看到这一延迟，第一反应这不是前端bug，并反馈给后端同窗。but，经过后端定位发现接口反馈时间很是迅速，翻阅国外文献事实证实，这是因为浏览器事件不标准引发的bug。

 

2.bug分析：

经过对开发同窗的沟通，我发现bug有两个特色，第一，这一延迟只存在须要上拉加载而引发ajax请求的状况下，且统一环境和浏览器下延迟时间类似，都在2-3s之间。

第二，部分上拉加载的组件虽然也触发ajax，但并未有延迟。

 

因而开始了前端，缘由的定位，首先找想通点：因为咱们的项目架构设计，所有的上拉加载都是由一个基础组件pagger 完成的，其部分代码如图所示，原理是经过浏览器的scroll事件和resize事件不停的去检测组件是否在可视区域中，若是是则触发hasMore函数。

 

 

 

其次，查看出现延迟问题的业务页面和不出现延迟的业务页面对这一组件的调用区别。

经过对比，也没有发现两个组件有何不一样。（故这一奥秘，有兴趣的同窗能够联系我一块儿讨论。。。。。我能够把源码发给你）

 

通过屡次的重现问题，明显看到在pc的chrome，使用touch模式延迟偶尔消失，而使用mousewheel延迟又出现。故将问题定位到mousewheel事件 和其相近对应的 scroll事件中。

 

bug解决：

 

结合上诉缘由并经过查看的几个帖子讨论，得出以下结论：

 

想要知道具体的解决方案，请关注个人公众号哦～回复 “content-download”获取原文哟

 

公众号