缓慢的 API 请求——Paw 与 Chrome

Question

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

当我在同一台机器上使用 Paw 之类的工具运行 Meters 请求时，该请求平均需要大约 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);
    }
});

单词

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

1. 获取页面
2. 第一个字节
3. Marionette.Application.start()
4. Meters请求开始
5. Meters请求完成
6. 页面已完全加载 && Meters 请求完成

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

1. 容器页面（启动应用的页面）的服务器加载时间
2. 所有 SPA 依赖项的下载时间（这些在 SPA 上可能会变得很重要）
3. 是时候完成其他 API 调用了
4. Meters 完成后渲染页面的时间

一旦您确定了您需要对 Meters 执行的操作以及实际发出请求所需的内容，您就可以通过更早地（尽可能快地）发出请求并更早地渲染（一旦完成）来进行优化你可以）。

如果您打开开发者工具并在“网络”活动中看到大量顺序加载（即没有堆叠条形），那么您可能有机会通过上述过程来缩短时间...

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