jQuery 동기화 Ajax로 인해 발생하는 UI 스레드 차단 문제에 대한 솔루션

이 글에서는 주로 jQuery 동기화 Ajax로 인해 발생하는 UI 스레드 차단 문제와 해결 방법을 소개합니다. 관심 있는 사람은 이에 대해 자세히 알아볼 수 있습니다. 나는 오늘 자살했다. 다소 조잡한 함수를 작성했는데 동기화된 Ajax로 인해 발생한 UI 스레드 차단 문제가 발생했습니다.

이유는 페이지에 유사한 비동기 요청 작업이 여러 개 있기 때문입니다. 코드의 재사용성을 높이기 위해 다양한 매개변수를 수신하고 데이터를 반환하는 역할만 담당하는 getData라는 함수를 캡슐화했습니다. 데이터. 제거된 기본 논리는 다음과 같습니다.

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

  return result;
}

여기서 ajax는 비동기식일 수 없습니다. 그렇지 않으면 함수가 반환될 때 결과에 ​​값이 할당되지 않고 오류가 발생합니다. 그래서 async:false를 추가했습니다. 문제가없는 것 같습니다. 이 함수를 호출하면 정상적으로 데이터를 얻을 수 있습니다.

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

다음으로 ajax 요청에는 일정 시간이 걸리기 때문에 요청하기 전에 페이지에 로딩 효과, 즉 "로딩" gif를 표시해야 합니다. 이미지아마도 다들 보셨을 겁니다. 그래서 내 처리 기능은 다음과 같습니다.

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

요청 전에 로딩 이미지를 표시하고 요청이 완료된 후에는 숨깁니다. 문제가없는 것 같습니다. 효과를 확실히 보기 위해 p.php 코드는 다음과 같이 3초 동안 sleep 했습니다.

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

그런데 버튼을 눌렀을 때 로딩 이미지가 예상대로 나오지 않는 문제가 발생했습니다. .페이지의 반응도 어땠나요? 오랜 시간 문제를 해결한 끝에 원인을 찾았는데, 바로 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으로 설정되고 브라우저는 설정된 최소 시간 후에 이를 실행합니다. 어쨌든 먼저 실행해서 살펴보도록 하겠습니다.

결과 로딩화면이 뜨는데! ! ! 애니메이션 GIF인데 왜 사진이 움직이지 않나요? 이때 동기화 요청이 지연되더라도 실행 중에 UI 스레드가 계속 차단될 것이라는 생각이 문득 들었습니다. 이 차단 기능은 정말 대단해서 gif 이미지조차 움직이지 않고 정적인 이미지처럼 보입니다.

결론은 분명합니다. SetTimeout은 증상을 처리하지만 근본 원인을 처리하지는 않습니다. 이는 동기화 요청을 "약간" 비동기화한 후에도 여전히 동기화 악몽에 빠지고 스레드를 차단하는 것과 같습니다. 계획이 실패했습니다.

Deferred를 사용할 시간입니다

버전 1.5 이후 jQuery에서는 매우 편리한 일반화 비동기 메커니즘을 제공하는 Deferred 개체를 도입했습니다. 자세한 내용은 이 문서(http://www.jb51.net/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를 제거한 것을 볼 수 있습니다. 이는 이 요청이 다시 비동기적임을 의미합니다. 성공 함수에서 다음 문장에 주의하세요: defer.resolve(data) Deferred 객체의 해결 메소드는 모든 유형의 매개변수를 전달할 수 있습니다. 이 매개변수는 done 메소드에서 얻을 수 있으므로 비동기적으로 요청한 데이터는 이런 방식으로 반환될 수 있습니다.

이 시점에서 문제가 해결되었습니다. 지연된 객체는 매우 강력하고 편리하므로 이를 활용할 수 있습니다.

모든 테스트 코드는 다음과 같습니다. 관심 있는 학생들은 이를 사용하여 테스트할 수 있습니다.

<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 : &#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: Firefox는 최적화되어 있나요?

위의 문제는 Chrome 및 IE9에서 테스트되었으며 결론은 일관됩니다. 하지만 Firefox에서 테스트했을 때 동기화된 ajax는 UI 스레드를 차단하지 않았으며 이는 이 문제가 전혀 존재하지 않음을 의미합니다. 다른 코드로 테스트했는데, Firefox에서는 js 스레드가 실제로 UI 스레드를 차단합니다. 한 가지 가능한 추측은 Firefox가 동기화된 Ajax를 최적화했다는 것입니다. 사실이 무엇인지 아직 알지 못했습니다. 혹시 아시는 분 계시면 조언 좀 부탁드리겠습니다.

위 내용은 jQuery 동기화 Ajax로 인해 발생하는 UI 스레드 차단 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!