详解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实现按比例缩放图片的方法
Apr 29 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现穿梭框效果
Jan 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
农民C键的运用技巧
2020/03/04 星际争霸
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
MySQL相关说明
2007/01/15 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php实现的短网址算法分享
2014/06/20 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python实现学生信息管理系统
2020/04/05 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
用python制作个音乐下载器
2021/01/30 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
标准毕业生自荐信范文
2013/11/04 职场文书
捐助倡议书范文
2014/04/15 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
新员工试用期自我评价
2015/03/10 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书