渲染引擎延迟会影响javascript中测量的维度

我正在开发一个主干应用程序，它可以呈现同一视图的多个实例。每个视图都有一个相当大的节点树，我可以看到用户代理无法即时渲染视图

我遇到的问题是，当我的渲染回调启动时，高度会变成

0

，因为用户代理的渲染引擎实际上还没有完成整个视图的渲染。如果我设置了超时，则正确的最终高度将通过：

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);
   }
});

如何解释此渲染引擎延迟

架构：

• jquery 1.7.2
• 主干网0.9.9

---

如果模板包含图像，我建议您使用标准的jquery

load

功能

_this.$el.children('img').load(function(){
    //the element should exist now
});

否则我不确定问题出在哪里。我很确定下划线的

模板

函数是同步的，所以我不会怀疑那里有任何问题。从设计角度来看，一件可能有效且可能更有意义的事情是使用

initialize

var ChildView = window.Backbone.View.extend({
   initialize: function(){
       var template = require('templates/ChildTemplate');
       this.renderedTemplate = template();

   },
   render: function() {
      this.$el.html(this.renderedTemplate);
      this.afterRender();
   },
});

---

如果您不想使用名称

renderedTemplate

，那没关系，只要确保不要将它命名为

template

，因为它已经在使用中了

如果模板包含图像，那么我建议您使用标准的jquery

load

函数

_this.$el.children('img').load(function(){
    //the element should exist now
});

否则我不确定问题出在哪里。我很确定下划线的

模板

函数是同步的，所以我不会怀疑那里有任何问题。从设计角度来看，一件可能有效且可能更有意义的事情是使用

initialize

var ChildView = window.Backbone.View.extend({
   initialize: function(){
       var template = require('templates/ChildTemplate');
       this.renderedTemplate = template();

   },
   render: function() {
      this.$el.html(this.renderedTemplate);
      this.afterRender();
   },
});

---

如果您不想使用名称

renderedTemplate

，那没关系，只需确保不要将其命名为

template

，因为该名称已在使用中

模板包含单个图像，但在加载之前我们知道其尺寸。问题是呈现的

ChildView

s的总数，而不是任何一个特定视图的内容。我的猜测是，用户代理正在向javascript引擎触发某种呈现后回调，表明它可以在实际完成整个节点树的呈现之前继续执行。我不知道这是如何在引擎盖下工作的。如果你真的想要修理，我会考虑看看。您可以为它提供一个回调，该回调将在元素完全加载到DOM中时执行。问题是呈现的

ChildView

s的总数，而不是任何一个特定视图的内容。我的猜测是，用户代理正在向javascript引擎触发某种呈现后回调，表明它可以在实际完成整个节点树的呈现之前继续执行。我不知道这是如何在引擎盖下工作的。如果你真的想要修理，我会考虑看看。您可以为它提供一个回调，该回调将在元素完全加载到DOM中时执行。我目前在Chrome上遇到了一个问题，对DOM元素的更改至少在几毫秒内不会被它们的JavaScript DOM属性反映出来。这实际上让我的代码一团糟；如果我有一系列条件语句或循环语句，在这些语句中我对DOM进行了修改，然后在JavaScript中进行了度量，那么我必须将代码分成一系列块，这些块可以通过setTimeout顺序调用彼此。在这种情况下，Chrome优化团队让我的生活变得比需要的困难得多。可能比这更复杂。我目前在Chrome上遇到了一个问题，对DOM元素的更改至少在几毫秒内不会被它们的JavaScript DOM属性反映出来。这实际上让我的代码一团糟；如果我有一系列条件语句或循环语句，在这些语句中我对DOM进行了修改，然后在JavaScript中进行了度量，那么我必须将代码分成一系列块，这些块可以通过setTimeout顺序调用彼此。在这种情况下，Chrome优化团队让我的生活变得更加困难。