Question

在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中进行了适当的更改，那么同样适用吗？

Answer 1

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

但是，其他没有相应原生实现的选择器会通过范围提升来提高性能。

// your examples will fall back to these native implementations and
// not be impacted by scoping
document.getElementById('inner')
document.getElementsByClassName('inner')

Answer 2

在使用作用域时，搜索'#inner'不必覆盖整个DOM

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

Answer 3

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

还有一些技巧可以使骨干视图具有高效性。我发布了一个我正在GitHub上工作的骨干视图子类。 https://github.com/puppybits/BackboneJS-PerfView它可以在90FPS以上呈现1,000,000个模型的集合。如果您感兴趣，那里有一堆优化评论。

Backbone：范围确定可以提高性能吗？

3 个答案: