title: Why does IE wait till the call stack is empty to send POST AJAX requests?
body: <p>Imagine in application composed of several different widgets. When an event is fired, the widgets clear out their current data, execute an AJAX request, then put in the new information when the response comes back.</p>
  <p>The following is a simplified example of what happens when that event is fired:</p>
  <pre><code>for (var i = 0; i &lt; 10; i++) {
      // Do an AJAX post
      $.ajax(document.location.href, {
          data: {
              name: ‘Zach Gardner’
          },
          method: ‘POST’
      });
      // Do some expensive DOM stuff
      for (var j = 0; j &lt; 100; j++) {
          var el = document.createElement(‘div’);
          document.body.appendChild(el);
          for (var k = 0; k &lt; 100; k++) {
              var child = document.createElement(‘div’);
              el.appendChild(child);
              el.removeChild(child);
          }
      }
  }
  </code></pre>
  <p><a href="https://jsfiddle.net/zgardner/tke04n51/" rel="nofollow noreferrer">Here is a JSFiddle of the code above</a></p>
  <p>If you open up Fiddler, and run it in Chrome, you'll notice the AJAX requests complete rather quickly.</p>
  <p><a href="https://i.stack.imgur.com/y139c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y139c.png" alt="Chrome" /></a><br />
  <sub>(source: <a href="http://zgardner.us/wp-content/uploads/2014/08/chrome.png" rel="nofollow noreferrer">zgardner.us</a>)</sub></p>
  <p>But if you do the same thing in IE (tested in 10, 11, 12 preview), you'll notice that the requests take much longer:</p>
  <p><a href="https://i.stack.imgur.com/kWErK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWErK.png" alt="IE" /></a><br />
  <sub>(source: <a href="http://zgardner.us/wp-content/uploads/2014/08/ie.png" rel="nofollow noreferrer">zgardner.us</a>)</sub></p>
  <p>What we've found is that IE will create the request when jQuery executes a call to the xhr's send method. But it holds onto the request until the call stack has been emptied.</p>
  <p><a href="https://i.stack.imgur.com/3ub6g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ub6g.png" alt="IE Fiddler" /></a><br />
  <sub>(source: <a href="http://zgardner.us/wp-content/uploads/2014/08/ie1.png" rel="nofollow noreferrer">zgardner.us</a>)</sub></p>
  <p>Notice the significant lag between ClientBeginRequest and ClientDoneRequest. We've found that ClientDoneRequest is always within a few milliseconds of the thread ending.</p>
  <p>This only happens for POST AJAX requests. The ClientBeginRequest and ClientDoneRequest for GETs are always within a few milliseconds of each other.</p>
  <p>Also, note that this problem also shows up with IE's Dev Tools:</p>
  <p><a href="https://i.stack.imgur.com/sRn6k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sRn6k.png" alt="IE Network" /></a><br />
  <sub>(source: <a href="http://zgardner.us/wp-content/uploads/2014/08/ie-dev-tools.png" rel="nofollow noreferrer">zgardner.us</a>)</sub></p>
  <p>If you inspect an individual request, you can the second Start, which is when it sends the body of the request, took 4.32 seconds:</p>
  <p><a href="https://i.stack.imgur.com/JG2vF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JG2vF.png" alt="IE First Request" /></a><br />
  <sub>(source: <a href="http://zgardner.us/wp-content/uploads/2014/08/ie-timings.png" rel="nofollow noreferrer">zgardner.us</a>)</sub></p>
  <p>Why is this happening?</p>
  <p>See <a href="http://zgardner.us/2014/08/06/ie-ajax-post-requests/" rel="nofollow noreferrer">my blog post</a> for a more detailed explanation.</p>