4 개 이상의 비동기 XmlHttpRequests가 동시에 트리거 될 때 IE8이 중단됩니다.

Question

for (var i = 0; i < 5; ++i) { 
    var xhr; 
    if (window.XMLHttpRequest) { 
    xhr = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
    xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    xhr.open('GET', '/Test/LongOperation?p=' + new Date()); 
    xhr.send(''); 
} 

이것은 실제 데모 (라이브 코드가 아님)이지만 핵심적인 문제를 보여줍니다. LongOperation은 10 초 후에 결과를 반환하는 메서드입니다.

질문 : 사용자가 위의 코드가 실행 된 후 페이지 오른쪽에서 멀리 이동하려고 할 때

1. 왜 IE8 (그리고 어쩌면 다른 정보 요소)가 정지합니까? FireFox/Safari는 이러한 요청을 취소하고 다른 페이지 탐색을 허용합니다. 'i < 5'을 'i < 4'으로 바꾸면 IE가 중단되지 않습니다.

2. 이 추한 IE 동작을 해결하려면 어떻게해야합니까? 사용자가 브라우저가 갑자기 멈 추면 매우 화가납니다.

Answer 1

내 질문에 대한 답. 내가 완료하지 않은 모든 xhr 개체를 window.onbeforeunload에서 중단합니다. 적어도이 솔루션은 나를 위해 작동합니다. 나는 약간() 메소드의 동작 $ 아약스를 오버라이드 (override) :

;(function($) { 
    var rq = []; 
    var ajax = $.ajax; 
    $.ajax = function(settings) { 
     // override complete() operation 
     var complete = settings.complete; 
     settings.complete = function(xhr) { 
      if (xhr) { 
       // xhr may be undefined, for example when downloading JavaScript 
       for (var i = 0, len = rq.length; i < len; ++i) { 
        if (rq[i] == xhr) { 
         // drop completed xhr from list 
         rq.splice(i, 1); 
         break; 
        } 
       } 
      } 
      // execute base 
      if (complete) { 
       complete.apply(this, arguments) 
      } 
     } 

     var r = ajax.apply(this, arguments); 
     if (r) { 
      // r may be undefined, for example when downloading JavaScript 
      rq.push(r); 
     } 
     return r; 
    }; 

    // 'kill' all pending xhrs 
    $(window).bind('beforeunload', function() { 
     $.each(rq, function(i, xhr) { 
      try { 
       xhr.abort(); 
      } catch(e) { 
       $debug.fail('failed to abort xhr'); 
      } 
     }); 
     rq = []; 
    }); 
})(jQuery); 

$ 디버그 - 그들은 IE 8의 기본 동작을 변경하지 않는 한이 나는 의심되는 내 유틸리티 클래스

Answer 2

대부분의 브라우저에는 주어진 서버에 대한 4 개의 연결 제한이 있습니다. 이 "문제"를 해결하는 한 가지 방법은 대역 외 XML 요청에 다른 호스트 이름을 사용하는 것입니다. 사용자 요청은 주 호스트로 전달되는 반면 AJAX 요청은 두 번째 서버로 이동할 수 있습니다.

Answer 3

비동기 적으로 실행 한 다음 각 HTTP 요청이 완료 될 때 다음 HTTP 요청을 실행하십시오. 나는 xmlhttp 요청이 IE의 UI 스레드를 차단하고 있다고 의심하지만 다른 브라우저의 구현은 좀 더 우아하다.

잘하면 두 번째 질문에 대한 해결 방법을 제공 할 것이지만 질문 1에 대한 진정한 이유는 추측 할 수 있습니다. 단지 버그 일 수 있습니다.