title: XMLHttpRequest really slow on Google Chrome
body: <p>I've been working yesterday on a new mini-project: <a href="http://www.mexicans.eu" rel="nofollow noreferrer">www.mexicans.eu</a>. A site that does just one thing: playing Jarabe, a Mexican song. There is a door in the middle of the page, which can be clicked on to open the door or to close it. Closing the door sets a filter on the Mexican song. Just some basic webaudio going on there.</p>
  
  <p>The problem though is the loading time in Google Chrome.</p>
  
  <pre class="lang-js prettyprint-override"><code>_loadDoorSound: function(url, onload) {
    var startTime = new Date().getTime();
  
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
  
    request.onload = function() {
      var loadTime = new Date().getTime() - startTime;
      console.log("Loaded sound in " + loadTime + " milliseconds");
  
      console.log("Decoding sound");
      this.ctx.decodeAudioData(request.response, function(buffer) {
        this.AUDIO.buffer = buffer;
        this.onload();
        console.log("Decoded sound");
      }.bind(this));
    }.bind(this);
  
    console.log("Loading sound");
    request.send();
  }
  </code></pre>
  
  <p>The loadtime in Google Chrome avarages on 14 seconds. In Firefox it avarages around 300 milliseconds.</p>
  
  <p><a href="https://i.stack.imgur.com/pb8ht.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pb8ht.jpg" alt="Awkward long loadtimes in Chrome in comparison to Firefox"></a></p>
  
  <p>However. When I serve the page locally, Google Chrome does load it very quickly, just as fast as Firefox. But why is Google Chrome so awkwardly slow when loading the sound from the server?</p>
  
  <p>PS: The site doesn't work at all yet for Internet Explorer due to IE not supporting the Webaudio API and not for Safari for unknown reasons.</p>