Search code examples
javascriptgoogle-chromexmlhttprequest

XMLHttpRequest really slow on Google Chrome

I've been working yesterday on a new mini-project: www.mexicans.eu. 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.

The problem though is the loading time in Google Chrome.

_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();
}

The loadtime in Google Chrome avarages on 14 seconds. In Firefox it avarages around 300 milliseconds.

Awkward long loadtimes in Chrome in comparison to Firefox

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?

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.

Solution

  • I found it. It was just a caching issue. After clearing the cache in Firefox I got roughly the same loading time as in Google Chrome.