Backbone.js 渲染延迟？

Question

我是主干新手，有一个问题我想不通。我将骨干与 require.js 一起使用。当我第一次想渲染一些视图时（当我在浏览器中重新加载页面时）index.html 立即显示，但随后它被隐藏了大约 2 秒，然后再次显示渲染模板。如果我然后在视图之间导航（不点击刷新）它工作顺利，但初始渲染做错了。这是我的代码：

查看：

define(['jquery','underscore','backbone', 'text!../../../templates/home/HomeView.tpl'], 
function($, _, Backbone, HomeTemplate)
{
var HomeView = Backbone.View.extend(
{
    events:{
    },

    render: function () 
    {
        var template = _.template(HomeTemplate);
        this.$el.html(template);

        return this;
    }

});

return HomeView;
});

路由器：

define(['jquery','underscore','backbone'], 
function($, _, Backbone)
{ 
var container = $("#container");

var AppRouter = Backbone.Router.extend(
{                       
    routes: 
    {
        "": "home"
    },

    home: function()
    {
        require(['views/home/HomeView'], 
        function(HomeView)
        {
            var Home = new HomeView({el: container});
            Home.render();
        });
    }


}); 


var initialize = function()
{
    var app_router = new AppRouter();


    Backbone.history.start();   
};

return { initialize: initialize };

});

我在控制台中没有错误。这种行为正常吗？

Answer 1

这是正常的。

RquireJs 通过 http 请求加载依赖项，这些请求确实有超时。此外，在浏览器中，最大并行下载量有限制。这些延迟在启动时很容易加起来长达 2 秒，再加上网络延迟。

如果您想尽量减少这种延迟，请使用RequireJS docs 中提到的 r.js 最小化文件。

编辑：如果 minify 不能解决问题，浏览器分析工具可以帮助您。