我知道在 Meteor 中使用 template.find() 或 template.$ 搜索 DOM 比使用 document.querySelector() 或 jQuery 搜索所有 DOM 更快。但是不知道快了多少。
我想这将与应用程序的 DOM 节点的数量直接相关，但我不知道是否是这种情况，或者 Meteor 中是否有任何其他优化/降级使得这个假设不那么成比例。
有人知道这方面的性能测试/结果吗？
【问题讨论】：
标签： performance meteor meteor-blaze
template 不等于 document。一个document 可以包含许多templates。 template.find abstracts $，但 template.find 没有添加任何功能。所以template.$ 和template.find 将或多或少地表现相同。 $ 是jQuery 的常见别名，当您将单个字符串传递给jQuery 函数时，它将经过更多抽象，可能 登陆document.querySelector。这就是document.querySelector is a lot faster than jQuery 的原因（jsperf 现在已经关闭，所以我不能告诉你快多少）。 jQuery 慢得多，在大多数情况下，它可能会在 document.querySelector 和 template.$ 之间接近。
您将获得最佳性能，方法是获取包裹目标的节点，然后使用本机 DOM 函数。如果模板中有包装元素，则可以使用 template.firstNode 属性。否则你可以做 blaze 所做的事情：template.firstNode.parentElement。然后我会使用getElementsByClassName 或getElementById。它们比querySelector 更快，因为使用querySelector 必须首先解析查询。至少在大多数情况下，这取决于您的包装节点中的节点数以及您搜索的元素在树内的距离。
【讨论】：
template.$ 通过抽象层执行$。它被隐藏了deep inside blaze。所以它很慢。搜索我找到了一个替代包装div 艰难。看看我的last revision。另外，回答你的问题：正确。
_domrange.parentNode 作为$-selector 的上下文。这意味着template.$ 的范围等于template.firstNode.parentElement。 So I updated my answer
我不能说我注意到我的用户有任何真正的性能提升，但我会说 template.find() 似乎在我的编码方式上给了我性能提升。
例如
var someID = $('#some-id');
在我添加这样的数组槽之前将无法管理：
var someID = $('#some-id')[0];
在哪里
var someID = template.find('#some-id')
只返回那个 html 元素，这意味着我不必每次都将它视为一个数组。
【讨论】：
jQuery 并返回 [0]。 Source code。我知道它更好一点，但它需要 jQuery 的整个可链接性。在我看来，这是它唯一的好处。