菜单

什么化解Ajax的content-download时间过慢问题

2018年11月18日 - Ajax

前言:

      网上有不少化解此问题的办法,试了瞬间还非好用,自己虽于这些方法测试了一晃,然后挨家挨户个败废的装置,最后取得了无限简易的方案。

今就篇稿子给大家介绍有关ajax的content-download时间过慢问题的化解及思维。

      放在首页是盖个人认为网上广大方案巨麻烦,而且不好用。只是一个多少经验,大家享用,用无了有些时就可以看完,免得以后要解决这题目时常自网上搜索浪费大家宝贵的光阴。
js代码:
得到XmlHttpRequest的类

事件背景:

图片 1图片 2Code
 1图片 3function HttpRequest()
 2图片 4图片 5图片 6{
 3图片 7    //取得Request对象
 4图片 8图片 9    this.Request=function()图片 10{
 5图片 11        try
 6图片 12图片 13        图片 14{
 7图片 15            if(window.XMLHttpRequest) request=new XMLHttpRequest();
 8图片 16            if(!request)request=new ActiveXObject(“Microsoft.XMLHTTP”);
 9图片 17            if(!request)request=new ActiveXObject(“Msxml2.XMLHTTP”);
10图片 18            return request;
11图片 19        }
12图片 20        catch(e)
13图片 21图片 22        图片 23{
14图片 24            alert(“不支持XMLHTTPRequest”);
15图片 25        }}
16图片 26}

开发人员反馈给自己一个bug,ajax相应速度很缓慢,经过一定,速度迟滞的由来在,content-download时间过长,在chrome中产生2s+的推迟,后证在咱们的手机客户端里也生及时无异于延缓。截图如下:

调用过程:

图片 27 

图片 28图片 29Code
 1图片 30<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”AjaxTest._Default”  %>
 2图片 31
 3图片 32<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 4图片 33<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
 5图片 34<head runat=”server”>
 6图片 35    <title>Untitled Page</title>
 7图片 36
 8图片 37    <script language=”javascript” type=”text/javascript” src=”User.Base.js”></script>
 9图片 38
10图片 39    <script language=”javascript” type=”text/javascript”>
11图片 40    function Check()
12图片 41图片 42    图片 43{
13图片 44    var request=new HttpRequest().Request();
14图片 45图片 46    request.onreadystatechange=function ()图片 47{
15图片 48        if(request.readyState==4)
16图片 49图片 50        图片 51{
17图片 52            if(request.status==200)
18图片 53图片 54            图片 55{
19图片 56                alert(request.responseText);
20图片 57            }
21图片 58            else
22图片 59图片 60            图片 61{
23图片 62                alert(request.responseText);
24图片 63            }
25图片 64        }
26图片 65    }
27图片 66    var value=document.getElementById(“val”).value;
28图片 67    request.open(“POST”,”Default.aspx?Value=”+value,true);
29图片 68    //设置预防乱码的计,只要同句话虽实行
30图片 69    request.setRequestHeader(“Content-Type”,”text/html;charset=gb2312″);
31图片 70    request.send(null);
32图片 71    }
33图片 72    </script>
34图片 73
35图片 74</head>
36图片 75<body>
37图片 76    <form id=”form1″ runat=”server”>
38图片 77    <div>
39图片 78        <input id=”val” type=”text” onblur=”Check()” />
40图片 79    </div>
41图片 80    </form>
42图片 81</body>
43图片 82</html>
44图片 83

过程分析:

后台取得输入值:

1.稳原因:

图片 84        protected void Page_Load(object sender, EventArgs e)
图片 85图片 86        图片 87{
图片 88            string value = Request[“Value”];
图片 89        }
图片 90

先是,看到就同一推,第一影响就不是前端bug,并报告给后端同学。but,通过后端定位发现接口反馈时特别迅速,翻阅国外文献事实证明,这是出于浏览器事件未规范引起的bug。

测试了,可以拿走不错的输入字符。

2.bug分析:

 

经对开发同学的牵连,我发觉bug有一定量只性状,第一,这无异缓只是在用高达拉加载而滋生ajax请求的景象下,且统一环境与浏览器下延迟时间相似,都于2-3s间。

原创文章,转载请注明出处!
All CopyRight Reserved !

其次,部分达到拖累加载的零件虽然也触发ajax,但尚未产生延迟。

 

于是乎开始了前者,原因的定位,首先找想通点:由于我们的类型架构设计,全部的上拉加载都是由于一个基础零部件pagger
完成的,其有代码如图所示,原理是通过浏览器的scroll事件以及resize事件未停止的去检测组件是否当可见到区域中,如果是虽然触发hasMore函数。

主页:http://jingtao.cnblogs.com

图片 91 

QQ:307073463
Email:jingtaodeemail@qq.com
MSN:sunjingtao@live.com

副,查看出现延迟问题的事体页面和无出新延迟的政工页面对当时等同组件的调用区别。

通过对比,也没有发觉个别只零部件有哪不同。(故这同一奥秘,有趣味之同校可以沟通自己共讨论。。。。。我可把源码发给你)

经再三之复出问题,明显看出在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时间过慢问题,希望对大家有着帮助,如果大家产生其他问题请让自家留言,小编会及时回复大家的。在此也非常感谢大家对台本的小网站的支持!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图