Javascript 主干：范围界定是否提高了性能？

在主干视图中查找内部元素时，是否通过将范围限制为

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>

---

useScoping（）

会比

noscope（）

更有效吗？我想应该是因为

这个。在构建对象时必须缓存$el

，这样在使用范围限定时，对

“#内部”

的搜索就不必覆盖整个DOM。但我想确定一下。如果我们对JavaScript进行了适当的更改，那么同样的情况也会发生吗？

性能将根据所使用的选择器而变化。在您提供的示例中#内部选择器将按ID查找元素，该ID使用内部维护的索引，不会扫描文档。对于使用类的选择，可能也是如此

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

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

当使用作用域时，对“#inner”的搜索不必覆盖整个DOM

---

你说得对。主干视图的

this.$el

只是JQuery包装元素的代理，因此

this.$el.find

只是JQuery，它只搜索子代，而不是整个DOM。

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

---

还有很多技巧可以让主干视图发挥作用。我在GitHub发布了一个主干视图子类。它可以以超过90帧/秒的速度渲染具有1000000个模型的集合。如果你感兴趣的话，这里有一系列的优化和评论

请参阅jsperf上的一些性能测试。如果您已经有了上下文元素，出于逻辑原因，您应该使用它。非常有趣的基准测试结果。谢谢谢谢只是对使用类的情况作了进一步的澄清：即使在

usesocping（）

的情况下，

document.getElementsByClassName（'internal'）

也会被调用，这是真的吗？我想到的情况是，类的某个实例

内部

外部。我想知道这种情况，因为如果首先查找所有

.inner

元素，然后查找那些具有

#outer

作为父元素的元素，而不是首先将搜索限制为

this.$el

，那么性能显然会更差。这也会对设置类和id标记的方式产生影响。一般来说，作用域方式更好。底层库的任务是确定是否使用本机方法，然后进行筛选，或者遍历DOM。通过范围界定，您可以为it部门提供最大限度的信息，以便其决定哪一个更好。遍历DOM在DOM子树中的节点数上是线性的，但是getElementsByCassName（）的本机实现可能通过使用预构建的索引以恒定的时间运行，然后双击每个节点将在树大小上是对数的。但是，使用范围界定，并由库决定。

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