Question

我有一个缓慢的API请求 - 称之为＆＃34;米＆＃34; - 在我的单页应用程序中。当我在Chrome中加载页面时，计量表请求大约需要一分钟才能完成。它是页面上的八个请求之一，其他所有请求都需要几毫秒才能完成。

当我在同一台机器上使用像Paw这样的工具运行仪表请求时，请求平均需要大约16秒。

什么可能导致这个可重复的三个差异因素？这是预期的吗？

SPA用backbone / marionette编写，后端/ API用python / Django / tastypie编写。

Answer 1

实施例

此示例的视图包含render所需的四个依赖模型。它的设置方式可能比需要的时间长四倍，因为即使视图取决于模型，模型也可以独立获取。

因此，获取模型所花费的总时间应该是获取任何一个模型所花费的时间的最大值，而是每个模型的 SUM 。这是一个很大的不同！

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

这是固定版本：

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

词

我会在这些地方记录时间：

获取页面
第一个字节
Marionette.Application.start()
Meters请求开始
Meters请求已完成
Page已满载＆amp;＆amp; Meters请求已完成

我怀疑发出请求的实际时间有很大差异。可能的罪魁祸首是

容器页面（启动应用程序的页面）的服务器加载时间
下载所有SPA依赖项的时间（这些可以在SPA上获得很大的成果）
完成其他API调用的时间
在Meters完成后呈现网页的时间

一旦确定了您需要对Meters做什么，以及实际发出请求所需的内容，您可以通过提前（尽快）提交请求并提前呈现（最快它完成了，你可以）。

如果您打开开发人员工具，并且您在＆＃34;网络＆＃34;中看到大量顺序加载活动（即不堆叠酒吧）然后你可能有机会通过上述过程减少时间......

如果你想要更多细节，请告诉我，但这是要点。

缓慢的API请求 - Paw vs. Chrome

1 个答案:

实施例

词