前言:
 
做前端架构很久很久了,经常到我这里都是些棘手的问题,之前没有养成很好的记录问题的习惯,以后会努力成文,积累。
于是今天就有个这篇文章。关于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. 常用Mysql数据库操作语句

    用户管理: 1.新建用户: 语法msyql>CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username - 你将创建 ...

  2. Golang学习--平滑重启

    在上一篇博客介绍TOML配置的时候,讲到了通过信号通知重载配置.我们在这一篇中介绍下如何的平滑重启server. 与重载配置相同的是我们也需要通过信号来通知server重启,但关键在于平滑重启,如果只 ...

  3. [翻译]现代java开发指南 第三部分

    现代java开发指南 第三部分 第三部分:Web开发 第一部分,第二部分,第三部分 =========================== 欢迎来到现代 Java 开发指南第三部分.在第一部分中,我们 ...

  4. Linux系统把/home重新挂载到其他硬盘或分区

    一开始没有做好规划,导致/home空间不足,再加上分区表不是GPT,导致无法扩展超过2T,因此需要重新划分一块更大的硬盘给/home. 1.把新挂载的4T硬盘进行分区和格式化 2.创建目录 sudo ...

  5. node express将请求重定向为https

    项目开发时,由于服务器只接受https请求(运维说了算...),所以在生产环境时,要把所有http请求全都重定向为https,具体操作是在app.js文件里加入以下代码: var express = ...

  6. Eclipse在线更新慢

    一.去掉不必要的更新 打开Windows-Preferences -> Install/Update –> Available Software Sites,将不需要的更新停用 二.关闭自 ...

  7. docker注意事项

      当你最后投入容器的怀抱,发现它能解决很多问题,而且还具有众多的优点: 第一:它是不可变的 – 操作系统,库版本,配置,文件夹和应用都是一样的.您可以使用通过相同QA测试的镜像,使产品具有相同的表现 ...

  8. CentOS7 安装eclipse

    1. 首先将eclipse的压缩包文件解压到/opt目录下,要使用root权限.执行如下解压命令:tar -zxvf eclipse-jee-oxygen-1a-linux-gtk-x86_64.ta ...

  9. python开发:初识python

    python简介 Python可以应用于众多领域,如:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算等众多领域.目前业内几乎所有大中型互联网企业都在使用Python,如:Youtube.D ...

  10. Java-Maven(一):Maven的简介与安装

    Maven的简介 Maven是什么? Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发者可以通过Maven更快的自动完成工程的基础构建陪孩子,因为Mave ...