详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法


Posted in jQuery onAugust 09, 2017

俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。

事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return。基本的逻辑剥离出来是这样的:

function getData1(){
    var result;
    $.ajax({
      url : 'p.php',
      async : false,
      success: function(data){
        result = data;
      }
    });

  return result;
}

这里的ajax不能用异步的,否则函数返回时,result还未赋值,会出错。所以我加了async:false。看起来好像没什么问题。我调用这个函数可以正常的得到数据。

$('.btn1').click(function(){
    var data = getData1();
    alert(data);
});

接下来,要加另外一个功能,由于ajax请求有一定的耗时,所以我需要在发出请求前页面有个loading效果,即显示一张“正在加载”的gif图片,想必大家也都见过。所以我的处理函数就变成了这样:

$('.btn1').click(function(){
    $('.loadingicon').show();
    var data = getData1();
    $('.loadingicon').hide();
    alert(data);
});

请求之前显示loading图片,请求完成后把它隐藏。看起来也没什么问题。为了看清效果,我的p.php代码sleep了3秒,如下:

<?php
sleep(3);
echo ('aaaaaa');
?>

但是我运行的时候问题出现了,我点击按钮并未像预想的那样出现这个loading图片,页面什么反应也没有。排除良久找到了原因,就在async:false这里。

浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。

setTimeout解决阻塞问题

既然明白了问题在哪里,我们就来针对性想办法。为了不让同步ajax请求阻塞线程,我想到了setTimeout,把请求的代码放到sestTimeout中,让浏览器重启一个线程来操作,不就解决问题了吗?于是乎,我的代码就变成了这样:

$('.btn2').click(function(){
    $('.loadingicon').show();
    setTimeout(function(){
      $.ajax({
        url : 'p.php',
        async : false,
        success: function(data){
          $('.loadingicon').hide();
          alert(data);
        }
      });
    }, 0);
});

setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行。不管三七二十一先运行起来看看。

结果loading图片显示出来了,但是!!!图片怎么不动呢,我明明是一张动态gif图。这个时候我很快就想到了,虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。

结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程。方案失败。

是时候用Deferred了

jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。详情可参看这篇文章https://3water.com/article/54762.htm。

于是我用Deferred对象改写了代码,如下:

function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : 'p.php',
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
}  

$('.btn3').click(function(){
    $('.loadingicon').show();
    $.when(getData3()).done(function(data){
      $('.loadingicon').hide();
      alert(data);
    });
});

可以看到我在ajax请求中去掉了async:false,也就是说,这个请求又是异步的了。另外请注意success函数中的这一句:defer.resolve(data),Deferred对象的resolve方法可传入一个参数,任意类型。这个参数可以在done方法中拿到,所以我们异步请求来的数据就可以以这样的方式来返回了。

至此,问题得到了解决。Deferred对象如此强大且方便,我们可以好好利用它。

我的全部测试代码如下,有意的同学可以拿去测一下:

<button class="btn1">async:false</button>
<button class="btn2">setTimeout</button>
<button class="btn3">deferred</button>
  
<img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src="loading2.gif" alt="正在加载" />
<script>

  function getData1(){
    var result;
    $.ajax({
      url : 'p.php',
      async : false,
      success: function(data){
        result = data;
      }
    });

    return result;
  }

  $('.btn1').click(function(){
    $('.loadingicon').show();
    var data = getData1();
    $('.loadingicon').hide();
    alert(data);
  });


  
  $('.btn2').click(function(){
    $('.loadingicon').show();
    setTimeout(function(){
      $.ajax({
        url : 'p.php',
        async : false,
        success: function(data){
          $('.loadingicon').hide();
          alert(data);
        }
      });
    }, 0);
  });



  function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : 'p.php',
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
  }  

  $('.btn3').click(function(){
    $('.loadingicon').show();
    $.when(getData3()).done(function(data){
      $('.loadingicon').hide();
      alert(data);
    });
  });</script>

PS:Firefox有做优化?

上述问题在chrome和IE9中测试结论一致。但是我在Firefox中测试时,同步ajax并未阻塞掉UI线程,也就是说这个问题根本不存在。我用其他代码做了测试,在Firefox中js线程确实是会阻塞UI线程,这个没有疑问。那可能的一个猜测就是Firefox对同步ajax做了优化,事实到底是什么,我暂未得知。有高人知道还请指点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
You might like
德生S2000电路分析
2021/03/02 无线电
深入php之规范编程命名小结
2013/05/15 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
python如何导入依赖包
2020/07/13 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
幼儿园教师辞职信
2014/01/18 职场文书
2014年国培研修感言
2014/03/09 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
房屋授权委托书范本
2014/10/07 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
语文教师个人工作总结
2015/02/06 职场文书
投诉书格式范本
2015/07/02 职场文书
安全生产感想
2015/08/07 职场文书