Javascript 为什么主干视图在早期代码之前呈现？

这里是我设置的一个示例页面，在这个页面中，在主干视图呈现之后，一个#blueSquare div将变为可见。即使代码放置在视图创建之前。我希望看到蓝色正方形立即显示，而不是在（强制长时间）渲染视图之后。我的目标是使加载微调器在创建视图之前显示，并在渲染视图之后隐藏。但我不明白这个问题

<style>

#blueSquare
{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background: blue;
    display: none;
}

</style>

<script type="text/javascript" src="js/ext/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/ext/underscore-min.js"></script>
<script type="text/javascript" src="js/ext/backbone-min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    TestView = Backbone.View.extend(
    {
        initialize: function()
        {
            console.log('initialize view');
            for (var i = 0; i < 1000000000; i++)
            {
                var t = Math.sqrt( i );
            }
            this.render();
        },
        render: function()
        {

            console.log('render view');
            //$('#blueSquare').hide();
        }
    });

    $('#blueSquare').show();
    var testView = new TestView();

});

</script>

#蓝方
{
位置：绝对位置；
顶部：100px；
左：100px；
宽度：100px；
高度：100px；
背景：蓝色；
显示：无；
}
$（文档）.ready（函数（）{
TestView=Backbone.View.extend(
{
初始化：函数（）
{
log（'initializeview'）；
对于（变量i=0；i<100000000；i++）
{
var t=数学sqrt（i）；
}
这个。render（）；
},
render:function（）
{
console.log（'render view'）；
//$（“#blueSquare”）.hide（）；
}
});
$（'#blueSquare'）.show（）；
var testView=newtestview（）；
});

---

最简单的解决方案是推迟视图的创建，以允许DOM刷新。可以通过将视图创建包装到

---

关于原因的解释，请参见

谢谢！我终于让它工作起来了。虽然下划线延迟函数破坏了我的主干代码，但setTimeout替代方法工作得很好。

<div id="blueSquare"></div>

$('#blueSquare').show();
_.defer(function(){
    var testView = new TestView();
});