如何解决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解决：

结合上诉原因并通过查看的几个帖子讨论，得出如下结论：

1.chrome浏览器的mousewheel事件是引起这一延迟的原因（mousewheel事件不是标准事件，不推荐大家使用），当然！代码中我并没有使用mousewheel事件，但是使用scroll事件就可能会引起mousewheel事件的冲突，而在我们特质的手机客户端中的webview不幸的也命中了这一缺陷。

2.想要解决这个问题，可以尝试监听这一事件（如果浏览器没有这一事件，也不会响应这一监听，没有冲突），并在事件触发的时候，取消其所有默认行为：

故通过监听其事件模型的 deltaY（鼠标垂直滚动量）当其有垂直位移的时候，触发preventDefault，故代码如下：

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

将这段代码加入前端基础库的页面初始化代码中，神奇的发现相关的页面content-download延迟问题都得到了解决。

总结：

兼容性问题的本质：

webkit架构中，有一些模块在浏览器中是普遍不共享的，有一些模块在浏览器中是某些特性不共享的，而且可以通过不同的编译配置改变它们的行为。所以，很多使用webkit的浏览器可能会表现出不同的行为。

以上所述是小编给大家介绍的解决Ajax的content-download时间过慢问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何解决Ajax的content-download时间过慢问题

    前言: 今天这篇文章给大家介绍关于ajax的content-download时间过慢问题的解决与思考. 事件背景: 开发人员反馈给我一个bug,ajax相应速度很慢,经过定位,速度慢的原因在于,content-download时间过长,在chrome中有2s+的延迟,后证实在我们的手机客户端里也有这一延迟.截图如下: 过程分析: 1.定位原因: 首先,看到这一延迟,第一反应这不是前端bug,并反馈给后端同学.but,通过后端定位发现接口反馈时间非常迅速,翻阅国外文献事实证明,这是由于浏览器事件不

  • 通过history解决ajax不支持前进/后退/刷新的问题

    通过history解决ajax不支持前进/后退/刷新的问题

    前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器"后退"和"前进"键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug. 事件描述: H5增加了一个事件window.onpopstate,当用户点击那两个按钮就会触 发这个事件.但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex.通过 history的pu

  • 基于Jquery.history解决ajax的前进后退问题

    以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

  • 完美解决ajax访问遇到Session失效的问题

    完美解决ajax访问遇到Session失效的问题

    最近由于一个项目,模块切换为ajax请求数据,当Session失效后,ajax请求后没有返回值,只有响应的html:<html><script type='text/javascript'>window.open('http://192.168.0.118:8080/welcomeAction/loginUI.do','_top');</script></html> 现在Ajax在Web项目中应用广泛,几乎可以说无处不在,这就带来另外一个问题:当Ajax请求

  • Python的Django应用程序解决AJAX跨域访问问题的方法

    引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width

  • 解决ajax提交到后台数据成功但返回不走success而走的error问题

    下面是ajax代码和Controller层代码,期初以为是后台程序写错了. $("#sourcefile").ajaxSubmit({ type: "post", dataType: "json", // 'xml', 'script', or 'json' (expected server response type) url: "/springMVC/upload/up", success: function (resul

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

  • JSONP跨域GET请求解决Ajax跨域访问问题

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • 深入浅析Jsonp解决ajax跨域问题

    深入浅析Jsonp解决ajax跨域问题

    一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS

  • springMVC解决ajax请求乱码的三种方法

    springMVC解决ajax请求乱码的问题 前言: 最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码.首先第一种是因为我们在web.xml中配置了spring的字符编码过滤器,那么使用ajax请求为什么就不行了呢?下面简单的分析一下,仅供参考. 先列出简单的请求代码: 浏览器端: <script type="text/javascript"> $.ajax({ type: "P

随机推荐