High latencies loading stores in an ExtJS 4.1 MVC application

Question

I'm currently working to turn a web app made with a homemade interface library into a standard ExtJS MVC application. Everything works fine except Ajax requests which suffer higher latencies on page startup. Indeed, although the file I call is not really different than before, sometimes I have to wait from 3 to 6 seconds more than before to get the response back.

To reduce the scope of my investigations, I have changed the code to return static data (a simple json string), eliminating the option of a database issue. Moreover, I have noticed that using "Replay XHR" in Google Chrome ("Network" panel) I get the response back almost instantaneously.

I guess it's hard to help on this topic but hope someone has already encountered this kind of issue and could share some advices on where to investigate.

Observations

• requests sorted by latency (the gap is about 500ms) :

  

• requests sorted by start time :

  

Answer 1

I have tried loading one store after another. Doing so, I have reduced the load time of all stores to about half a second. I don't know if this problem occurs on every browsers, I will check this one day. Here is the patch (don't forget to remove autoLoad:true to all stores):

// filters stores to load on startup
// store.self.getName() returns "AppName.store.MyStore"

var stores = Ext.StoreManager.filterBy(function (store) {
    return Ext.Array.indexOf(
        ['Store1', 'Store3', 'Store5'], 
        store.self.getName().split('.').pop()
    ) !== -1;
});

// loads one store after another

(function () {
    var callee = arguments.callee,
        store = stores.getAt(0);
    store.load({
        scope: this,
        callback: function () {
            stores.remove(store);
            if (stores.getCount()) {
                callee.call(this);
            } else {
                // all stores are now loaded
            }
        }
    });
}).call(this);