前言:
 
做前端架构很久很久了,经常到我这里都是些棘手的问题,之前没有养成很好的记录问题的习惯,以后会努力成文,积累。
于是今天就有个这篇文章。关于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”获取原文哟
 
公众号

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

  1. 优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download

    优化vue+springboot项目页面响应时间:waiting(TTFB) 及content Download TTFB全称Time To First Byte,是指网络请求被发起到从服务器接收到地 ...

  2. 通过原生js的ajax或jquery的ajax获取服务器的时间

    在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...

  3. ajax的content-download时间过慢问题的解决与思考

    其次,查看出现延迟问题的业务页面和不出现延迟的业务页面对这一组件的调用区别. 通过对比,也没有发现两个组件有何不同.(故这一奥秘,有兴趣的同学可以联系我一起讨论.....我可以把源码发给你) 经过多次 ...

  4. 【转载】Extjs设置Ajax请求的超时时间timeout

    在Extjs中的Ajax请求中,Ext.Ajax.request 默认超时时间是30秒,有时候我们有比较耗时的操作需要设置更长时间,此时我们就需要修改Ext.Ajax.Requset的超时时间为更长, ...

  5. ajax jsonp请求报错not a function的解决方案

    概述 最近工作中使用ajax,有时会报json4 is not a function的错误,有时又不会报错.找了很久,网上说是因为多次请求同一个资源导致的,但是我检查了自己的代码,对于重复资源并没有重 ...

  6. ajax 请求成功,但是后台feigin请求超时解决方案

    ========后台请求数据时间较长,报feigin超时错误====== fegin报错如下: feign.RetryableException: Read timed out executing P ...

  7. 02基于注解开发SpringMVC项目(jar包,异步,request,参数传递,多选的接收,Model传参,map传参,model传参,ajax,重定向,时间日期转换)

     1 所需jar包 项目结构如下: 2 web.xml配置文件的内容如下: <?xmlversion="1.0"encoding="UTF-8"?&g ...

  8. ajax异步服务器获取时间

    1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...

  9. jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)(转)

    版权声明]:版权归作者所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.open-lib.com/Forum/Read_69_1.action 前言: 当jquery ...

随机推荐

  1. JAVA_SE基础——67.System类

    System类对大家都不陌生吧! 以前经常需要打印结果时使用的都是"System.out.println()"语句,这句代码中就使用了System类.System类定义了一些与系统 ...

  2. egg.js 的优缺点

    egg.js 的优缺点 优点 所有的 web开发的点都考虑到了 agent 很有特色 文件夹规划到位 扩展能力优秀 缺点 最大的问题在于: 使用 loader 加载之后,失去了代码提示的能力 监控和运 ...

  3. maven 每次update后影响接口实现类的问题

    遇到maven每次update后,就会更改eclipse中java Compiler中的jdk compliance版本 <plugin> <groupId>org.apach ...

  4. unity3D 知识点随手记

    最近闲来无事,记记unity3D相关的一些知识点吧,也当作笔记存储.转载请标明出处:http://www.cnblogs.com/zblade/ 1.unity是如何调用Start/Awake等相关函 ...

  5. SpringBoot+Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675

  6. api-gateway实践(07)新服务网关 - 手动发布

    应用地址:http://10.110.20.191:8080/api-gateway-engine/ 一.准备工作 1.xshell登陆云主机 1.1.配置链接 1.2.链接成功 1.3.关闭防火墙 ...

  7. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  8. Set<E> 接口简明

    java. util. Set 接口 Set 接口中的方法和 Collection 中方法一致的.Set 接口取出方式只有一种, 迭代器 . HashSet : 底层数据结构是哈希表,线程 是不同步的 ...

  9. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  10. Numpy&Pandas

    Numpy & Pandas 简介 此篇笔记参考来源为<莫烦Python> 运算速度快:numpy 和 pandas 都是采用 C 语言编写, pandas 又是基于 numpy, ...