Solution to the UI thread blocking problem caused by jQuery synchronized Ajax

This article mainly introduces the UI thread blocking problem and solutions caused by jQuery synchronized Ajax. It has certain reference value. Those who are interested can learn about it

As the saying goes, if you don't seek death, you won't die. I committed suicide today and wrote a relatively stupid function. I encountered the UI thread blocking problem caused by synchronized Ajax. I will record it here.

The reason is this, because there are multiple similar asynchronous request actions on the page. In line with the principle of improving code reusability, I encapsulated a function named getData, which receives different parameters and only Responsible for obtaining data and then returning the data. The basic logic stripped out is as follows:

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

  return result;
}

The ajax here cannot be asynchronous, otherwise when the function returns, the result has not been assigned a value, and an error will occur. So I added async:false. It seems like there is no problem. I can get the data normally by calling this function.

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

Next, I need to add another function. Since the ajax request takes a certain amount of time, I need to have a loading effect on the page before making the request, that is, display a You must have seen this gif picture of "Loading". So my processing function becomes like this:

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

Display the loading image before the request, and hide it after the request is completed. There seems to be no problem. In order to see the effect clearly, my p.php code sleeps for 3 seconds, as follows:

<?php
sleep(3);
echo (&#39;aaaaaa&#39;);
?>

But a problem occurred when I ran it. When I clicked the button, it did not work as expected. The loading picture appears like this, but the page does not respond at all. After troubleshooting for a long time, I found the reason, which is async:false.

The browser's rendering (UI) thread and js thread are mutually exclusive. When executing js time-consuming operations, page rendering will be blocked. There is no problem when we execute asynchronous ajax, but when set to a synchronous request, other actions (the code behind the ajax function, and the rendering thread) will stop. Even if my DOM operation statement is the sentence before the request is initiated, this synchronization request will "quickly" block the UI thread without giving it time to execute. This is why the code fails.

setTimeout solves the blocking problem

Now that we understand where the problem is, let’s find a solution. In order to prevent the synchronous ajax request from blocking the thread, I thought of setTimeout, put the request code in sestTimeout, and let the browser restart a thread to operate. Wouldn't the problem be solved? Ever since, my code has become like this:

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

The second parameter of setTimeout is set to 0, and the browser will execute it after a set minimum time. . No matter what, let's run it first and see.

The result loading picture is displayed, but! ! ! Why doesn't the picture move? It's obviously an animated gif. At this time, I quickly thought that although the synchronization request was delayed, it would still block the UI thread during its execution. This blocking is so awesome that even the gif image doesn’t move and looks like a static image.

The conclusion is obvious. SetTimeout treats the symptoms but not the root cause. It is equivalent to making the synchronization request "slightly" asynchronous. Then it will still enter a synchronization nightmare and block the thread. The plan failed.

It’s time to use Deferred

After version 1.5, jQuery introduced the Deferred object, which provides a very convenient generalized asynchronous mechanism. For details, please refer to this article http://www.jb51.net/article/54762.htm.

So I rewrote the code using the Deferred object, as follows:

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);
    });
});

You can see that I removed async:false in the ajax request, that is to say , this request is asynchronous again. Please also pay attention to this sentence in the success function: defer.resolve(data). The resolve method of the Deferred object can pass in a parameter of any type. This parameter can be obtained in the done method, so the data we requested asynchronously can be returned in this way.

At this point, the problem has been solved. Deferred objects are so powerful and convenient, we can take advantage of them.

All my test codes are as follows. Interested students can use them to test:

<button class="btn1">async:false</button>
<button class="btn2">setTimeout</button>
<button class="btn3">deferred</button>
  
<img class="loadingicon lazy"  src="/static/imghwm/default1.png"  data-src="loading2.gif"     style="max-width:90%"  alt="正在加载" />
<script>

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

    return result;
  }

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


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



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

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

PS: Is Firefox optimized?

The above problems have been tested in chrome and IE9 and the conclusions are consistent. But when I tested it in Firefox, synchronized ajax did not block the UI thread, which means that this problem does not exist at all. I tested it with other codes. In Firefox, the js thread will indeed block the UI thread. There is no doubt about this. One possible guess is that Firefox has optimized synchronized ajax. I have not yet learned what the fact is. If anyone knows, please give me some advice.

The above is the detailed content of Solution to the UI thread blocking problem caused by jQuery synchronized Ajax. For more information, please follow other related articles on the PHP Chinese website!