前言:
 
做前端架构很久很久了,经常到我这里都是些棘手的问题,之前没有养成很好的记录问题的习惯,以后会努力成文,积累。
于是今天就有个这篇文章。关于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. 第一章 创建WEB项目

    第一章   创建WEB项目 一.Eclipse创建WEB项目 方法/步骤1 首先,你要先打开Eclipse软件,打开后在工具栏依次点击[File]>>>[New]>>&g ...

  2. AngularJS1.X学习笔记12-Ajax

    说到Ajax,你一定是思绪万千,想到XMLHttpRequest,$.ajax(),跨域,异步之类的.本文将探讨一下AngularJS的Ajax. 一.一个简单的例子 <!DOCTYPE htm ...

  3. python 字符串的方法

    capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度 width 的新字符串 c ...

  4. OAuth2.0学习(1-7)授权方式4-客户端模式(Client Credentials Grant)

    授权方式4-客户端模式(Client Credentials Grant) 客户端模式(Client Credentials Grant)指客户端以自己的名义,而不是以用户的名义,向"服务提 ...

  5. SpringCloud的服务网关zuul

    演示如何使用api网关屏蔽各服务来源 一.概念和定义 1.zuul最终还是使用Ribbon的,顺便测试一下Hystrix断路保护2.zuul也是一个EurekaClient,访问服务注册中心,获取元数 ...

  6. python-3.x-基本数据类型

    当前学习版本为: python-3.6-4 代码: """整型 NUMBER""" a = 2 ** 5 b = a + 4 c = a / ...

  7. 记java应用linux服务单个CPU使用率100%分析

    之前在做项目的过程中,项目完成后在linux服务器上做性能测试,当服务跑起来的时候发现cpu使用率很奇怪,java应用把单个cpu跑满了,其他cpu利用率0%. 刚开始遇到这问题的时候我第一时间反应使 ...

  8. 消息队列的使用 RabbitMQ (二): Windows 环境下集群的实现

    一.RabbitMQ 集群的基本概念 一个 RabbitMQ 中间件(broker) 由一个或多个 erlang 节点组成,节点之间共享 用户名.虚拟目录.队列消息.运行参数 等, 这个 节点的集合被 ...

  9. 阿里云下Linux服务器安装Mysql、mongodb

    阿里云下Linux服务器安装Mysql.mongodb 一.MySQL的安装和配置 1.安装rpm包 rpm -Uvh http://dev.mysql.com/get/mysql-community ...

  10. uva 10870

    https://vjudge.net/problem/UVA-10870 题意: f(n) = a1f(n − 1) + a2f(n − 2) + a3f(n − 3) + . . . + adf(n ...