Jquery ajax 동기화blocking_jquery로 인해 발생한 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초 동안 휴면 상태로 유지됩니다.

<&#63;php
sleep(3);
echo ("aaaaaa");
&#63;>

그런데 실행을 해보니 문제가 발생했습니다. 버튼을 눌렀을 때 로딩 이미지가 예상대로 나오지 않고, 페이지가 전혀 반응하지 않더군요. 오랜 시간 문제를 해결한 끝에 원인을 찾았는데, 바로 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를 사용할 시간입니다

jQuery는 버전 1.5 이후에 매우 편리한 일반화 비동기 메커니즘을 제공하는 Deferred 객체를 도입했습니다. 자세한 내용은 Ruan Yifeng 선생님의 이 글 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html을 참조하세요.

그래서 다음과 같이 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=http://www.update8.com/Web/Jquery/"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:$.ajax의 매개변수 설명

매개변수 설명

URL이 필요합니다. 요청을 보내야 하는 URL을 지정합니다.
데이터는 선택 사항입니다. 맵 또는 문자열 값. 요청과 함께 서버로 전송될 데이터를 지정합니다.
성공(데이터, textStatus, jqXHR) 선택사항. 요청이 성공했을 때 실행되는 콜백 함수입니다.
데이터 유형
선택 과목. 예상되는 서버 응답의 데이터 유형을 지정합니다.
지능형 판단은 기본적으로(xml, json, script 또는 html) 수행됩니다.