3

在 Backbone 视图中查找内部元素时，您是通过将范围限制为 来获得最佳性能this.$el，还是该find()方法仍然必须搜索整个 DOM？

这是我正在谈论的一个存根示例：

<!-- a bunch of other stuff -->
<div id="outer">
    <!-- a bunch of other stuff -->
    <div id="inner">foo</div>
</div>
<!-- a bunch of other stuff -->
<script>
    var myView = new MyView({el: $('#outer')}); 
</script>

MyView 在哪里：

MyView = Backbone.View.extend({
    //other code

    useScoping: function() {
        var $innerElement = this.$el.find('#inner');
        $innerElement.text('bar');
    },

    noScoping: function() {
        var $innerElement = $('#inner');
        $innerElement.text('bar');
    } 
});

会useScoping()比 更有效率noScoping()吗？我认为这是因为this.$el必须在构造对象时进行缓存，以便在使用范围时搜索'#inner'不必覆盖整个 DOM。但我想确定一下。如果我们class="inner"对 JavaScript 进行适当的更改，同样的情况会适用吗？

4

3 回答 3

4

性能会因使用的选择器而异。在您提供的示例中，#inner 选择器将按 ID 查找元素，该元素使用内部维护的索引并且不会扫描文档。使用类进行选择可能也是如此。

但是，其他没有相应本机实现的选择器将通过作用域提高其性能。

// your examples will fall back to these native implementations and
// not be impacted by scoping
document.getElementById('inner')
document.getElementsByClassName('inner')
于 2013-10-17T00:17:25.773 回答
1

使用范围界定时，对“#inner”的搜索不必覆盖整个 DOM

你是对的。Backbone 视图this.$el只是 JQuery 包装元素的代理，而 JQuery 也是如此this.$el.find，find它只搜索后代，而不是整个 DOM。

于 2013-10-17T00:18:39.607 回答
1

如果您担心渲染性能，最好的解决方案是使用 jquery 选择器保存一个变量并始终使用它。当模型更改时，使用缓存的 jquery 选择器来更新 dom 而不是重新渲染模板。

还有很多技巧可以使主干视图高效。我在 GitHub 上发布了一个主干视图子类。https://github.com/puppybits/BackboneJS-PerfView它可以以超过 90FPS 的速度渲染包含 1,000,000 个模型的集合。如果您有兴趣，那里有一堆优化和评论。

于 2013-10-22T03:38:53.120 回答