[Fixed]-Slow API request — Paw vs. Chrome

by

1👍

Example

This example has a view with four dependent models that are needed for the render. The way it is set up, it will take perhaps four times longer than necessary, because even though the view depends on the models, the models can be fetched independently.

So the total time spent fetching models should be the maximum of the time spent fetching any one model, but instead, it is the SUM of each. That’s a big difference!

var SerialTimeKillerA = Backbone.Model.extend({
    url: 'time/killer/A'
});

var SerialTimeKillerB = Backbone.Model.extend({
    url: 'time/killer/B'
});

var SerialTimeKillerC = Backbone.Model.extend({
    url: 'time/killer/C'
});

var AnotherTimeKiller = Backbone.Model.extend({
    url: 'seriously'
});

var SerialTimeKillerView = Backbone.View.extend({
    initialize: function() {
        var modelA = this.modelA = new SerialTimeKillerA();
        var modelB = this.modelB = new SerialTimeKillerB();
        var modelC = this.modelC = new SerialTimeKillerC();

        var _this = this;

        modelA.fetch().complete(function() {
            modelB.fetch().complete(function() {
                modelC.fetch().complete(function() {
                    _this.render();
                });
            });
        });
    },
    render: function() {
        if (this.anotherOne)
            return templater.render(this);
        else {
            var _this = this;
            this.anotherOne = new AnotherTimeKiller();
            this.anotherOne.fetch().complete(function() {
                _this.render();
            });
        }
    }
});

Here is the fixed version:

var SerialTimeKillerView = Backbone.View.extend({
    initialize: function() {
        this.modelA = new SerialTimeKillerA();
        this.modelB = new SerialTimeKillerB();
        this.modelC = new SerialTimeKillerC();
        this.anotherOne = new AnotherTimeKiller();

        var _this = this;

        $.when(this.modelA.fetch(), this.modelB.fetch(), this.modelC.fetch(), this.anotherOne.fetch()).done(function(a, b, c, x) {
            _this.render();
        });
    },
    render: function() {
        return templater.render(this);
    }
});

Words

I would log the time at these places:

  1. GET page
  2. First byte
  3. Marionette.Application.start()
  4. Meters request start
  5. Meters request finished
  6. Page is fully loaded && Meters request finished

I doubt there’s a big difference in the actual time to place the request. The likely culprits are

  1. Server load time for the container page (the page that boots the app)
  2. Download time for all the SPA dependencies (these can get big on an SPA)
  3. Time to complete other API calls
  4. Time to render the page after Meters is done

Once you identify what you need to do with Meters, and what you need to actually place the request, you can optimize by placing the request earlier (as soon as you can) and rendering earlier (as soon as its done and you can).

If you open Developer tools and you see a lot of sequential loading in the “Network” activity (ie not stacking of bars) then you may have an opportunity to cut the time by the process described above…

Let me know if you want more specifics but that’s the gist.

👤tacos_tacos_tacos

Leave a comment