template.find（）vs document.querySelector vs jquery vs template。$ performance in Meteor

我知道使用template.find()或template.$来搜索Meteor中的DOM比搜索所有与document.querySelector()或jQuery的DOM更快。但我不知道有多快。我想它会直接与应用程序的DOM节点数量有关，但我不知道是否是这种情况，或者如果Meteor中有任何其他优化/降级使得这种假设不成比例。有没有人知道关于此性能测试/结果？

来源

2015-06-26 Paulo Janeiro

template不等于document。 A document可以包含许多template。 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.$之间关闭。

通过获取包装目标的节点并使用native-DOM函数，您将获得最佳性能。如果您的模板中有一个包装元素，则可以使用template.firstNode属性。否则，你可以做些什么：template.firstNode.parentElement。然后我使用getElementsByClassName或getElementById。他们比querySelector更快，因为使用querySelector查询必须先被解析。至少大部分时间取决于包装节点中的节点数量以及树中搜索元素的距离。

来源

2015-06-26 21:06:20 Kriegslustig

你说得对。我使用jperf来查看这些DOM遍历差异有多大。从你说的我想象通过使用模板。$查询首先完成，然后结果被传递给一个jQuery对象，而不是相反。此外，你建议使用本地getElementByClassName（我不使用元素中的ID），而不是在文档上，但在template.firstNode上。但是，这不会搜索我认为的兄弟姐妹，所以我必须将我的模板元素包含在div中，例如？ –

'模板。$'通过抽象层执行'$'。它隐藏了[深入内部]（https://github.com/meteor/meteor/blob/master/packages/blaze/dombackend.js#L177）。所以它很慢。搜索我发现了一个替代缠绕'div'的艰难。看看我的[最新版本]（https://stackoverflow.com/posts/31082153/revisions）。另外，要回答你的问题：正确。 – Kriegslustig

@PauloJaneiro我发现blaze使用'_domrange.parentNode'作为'$'-selector的上下文。这意味着'template。$'的范围等同于'template.firstNode.parentElement'。 [所以我更新了我的答案]（https://stackoverflow.com/posts/31082153/revisions） – Kriegslustig

我不能说我注意到我的用户有任何真正的性能提升，但我会说template.find（）似乎让我在编码方面有了性能提升。

例如

var someID = $('#some-id');

不会是可控的，直到我添加一个数组插槽，像这样：

var someID = $('#some-id')[0];

凡为

var someID = template.find('#some-id')

只返回HTML元素，意思是我不必每次都像数组一样对待它。

来源

2015-06-26 21:02:23 thatgibbyguy

关于该数组的事情..流星只是执行'jQuery'并返回'[0]'。 [源代码]（https://github.com/meteor/meteor/blob/master/packages/blaze/template.js#L311）。我知道它有点更好，但它需要jQuery的整个链接。正如我所看到的那样，它是唯一的好处。 – Kriegslustig

我也有这个问题。然后仔细查看文档（Meteor和jQuery），我发现这正是使用模板的好处之一。$（selector）特别是当使用类作为选择器时：将搜索的范围缩小到模板我得到JUST元素I希望它工作正常，我可以应用jQuery方法与使用jQuery完全相同。当我使用jQuery时，有时我会得到更多其他元素与同一个类，并且我遇到同样的问题。 –

感谢Paulo，是的，确切的问题是我无法将jQuery方法应用到它。很高兴知道。 – thatgibbyguy

template.find（）vs document.querySelector vs jquery vs template。$ performance in Meteor

回答

相关问题