title: Rendering engine delay affects measured dimensions in javascript
body: <p>I'm working on a Backbone app that renders several instances of the same view.  Each of the views has a fairly large node tree and I can see that the user agent can't render the views instantaneously.</p>
  
  <p>The issue I'm running into is that when my render callbacks fire, the height is coming through as <code>0</code> because the user agent's rendering engine hasn't actually finished rendering the entire view.  If I set a timeout, the correct final height comes through:</p>
  
  <pre><code>var ChildView = window.Backbone.View.extend({
     render: function() {
        var template = require('templates/ChildTemplate');
        this.$el.html(template());
        this.afterRender();
     },
     afterRender: function() {
        console.log(this.$el.outerHeight());  // 0
        var _this = this;
        setTimeout(function(){
           console.log(_this.$el.outerHeight()); // 51 (or some non-zero integer)
        }, 100);
        setTimeout(function(){
           console.log(_this.$el.outerHeight()); // 240, full correct height
        }, 300);
     }
  });
  </code></pre>
  
  <p>How can I account for this rendering engine delay?</p>
  
  <p>Architecture:</p>
  
  <ul>
  <li>jquery 1.7.2</li>
  <li>backbone 0.9.9</li>
  </ul>