js ajax同步请求造成浏览器假死的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js ajax同步请求造成浏览器假死的问题相关的知识,希望对你有一定的参考价值。

一、问题的起因

  今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下:

/**
     * 异步当前用户积分 by zgw 20161216
     * @return {[type]} [description]
    */
    function flushIntegralSum() {
     //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").replaceWith(‘
<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" id="flushbutton">正在刷新</a>‘); $.ajax({ url:‘URL‘, type:‘post‘, async:false, // data:{}, success:function(json){ json = eval(‘(‘+json+‘)‘); if(json.url){window.location.href=json.url;return;} $("#flushbutton").replaceWith(‘<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>‘); if(json.code!=1){ alert(json.msg); }else{ $("#free_sum").html(json.free_sum); } return; } }); }

本以为这么简单的功能喀喀喀随便写写就没事了,在运行的时候出现了问题,当用户点击刷新积分按钮时,文案没有修改为"正在刷新",但是ajax请求发送了,于是我查看网页代码,发现js其实把文案和html元素绑定的onclick事件去掉了,在请求成功后有变回原来的了,但是页面上边文案没有改变,当时很奇怪,不知道为什么html代码里边改变了,页面却没有变点变化

二、了解问题原因

  问题的根源:当时我进行了排查,最后发现是 "async:false" 的问题,换成异步的就没有问题了,那为什么同步请求会产生代码失效的问题呢?

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

三、解决问题

  1.我当时使用了 setTimeout 来解决,把ajax代码放在sestTimeout中,让浏览器重启一个线程来操作,这样就解决问题了,代码如下:

  function flushIntegralSum() {
     //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
        $("#flushbutton").replaceWith(‘<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" id="flushbutton">正在刷新</a>‘);
        setTimeout(function(){
            $.ajax({
                url:‘URL‘,
                type:‘post‘,
                async:false,
                // data:{},
                success:function(json){
                    json = eval(‘(‘+json+‘)‘);
                    if(json.url){window.location.href=json.url;return;}
                    $("#flushbutton").replaceWith(‘<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>‘);
                    if(json.code!=1){
                      alert(json.msg);
                    }else{
                      $("#free_sum").html(json.free_sum);
                    }
                    return;
                }
            });
        },0) 
    }

  setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行

  到这里问题就解决了,但是你可以试试当你点击按钮的时候如果需要弹出一个gif图片,并且图片一直在旋转,提示更新中,你会发现图片虽然会显示,但是图片却是不动的,那是因为虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程,这种方法只适合发请求之前操作简单的时间短的情况

  2.使用 Deferred 来解决

    下班了,再续...........

 


以上是关于js ajax同步请求造成浏览器假死的问题的主要内容,如果未能解决你的问题,请参考以下文章

Ajax同步异步请求

ajax同步与异步的区别

ajax的同步与异步

Ajax同步与异步优缺点与适用情况。

ajax同步方式提交请求,beforeSend不起作用,即IE假死 代码如下:

ajax的async属性(控制同步和异步)