title: Why does a backbone view render before earlier code?
body: <p>Here is a sample page I set up, in which a #blueSquare div is made visible after the backbone view has been rendered. Even though the code is placed before the creation of the view. I would expect to see the blue square to show instantly and not after the (forcibly long) rendering of the view. My aim is to make a loading spinner to show before the view is created, and hides after the view is rendered. But I don't understand this problem.</p>
  
  <pre><code>&lt;style&gt;
  
  #blueSquare
  {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background: blue;
      display: none;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="js/ext/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/ext/underscore-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/ext/backbone-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      TestView = Backbone.View.extend(
      {
          initialize: function()
          {
              console.log('initialize view');
              for (var i = 0; i &lt; 1000000000; i++)
              {
                  var t = Math.sqrt( i );
              }
              this.render();
          },
          render: function()
          {
  
              console.log('render view');
              //$('#blueSquare').hide();
          }
      });
  
      $('#blueSquare').show();
      var testView = new TestView();
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;div id="blueSquare"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>