template.find()vs document.querySelector vs jquery vs template.$流星的性能 [英] template.find() vs document.querySelector vs jquery vs template.$ performance in Meteor

问题描述

我知道使用template.find()或template.$在Meteor中搜索DOM比使用document.querySelector()或jQuery搜索所有DOM更快.但是我不知道要快多少. 我想这可能与应用程序的DOM节点数直接相关，但我不知道是否是这种情况，或者Meteor中是否存在任何其他优化/降级使得该假设与比例不成比例. 有谁知道性能测试/结果吗?

I know that using template.find() or template.$ to search the DOM in Meteor is faster than searching all the DOM with document.querySelector() or jQuery. But I don't know how much faster. I imagine it would be directly related to the number of DOM nodes of the app but I don't know if that's the case or if there's any other optimization/degradation in Meteor that makes this assumption not so proportional. Does anyone know about a performance test/result on this?

推荐答案

template不等于document. document可以包含许多template. template.find摘要$ ，但是template.find没有添加任何功能.因此template.$和template.find将或多或少地表现相同. $是jQuery的通用别名，当您将单个字符串传递给jQuery函数时，它将经过一些抽象，并且可能落在document.querySelector上.这就是为什么 document.querySelector比jQuery 快很多的原因(jsperf目前处于关闭状态，所以我无法告诉您更快的速度. jQuery慢得多，以致在大多数情况下它可能会在document.querySelector和template.$之间进行近距离调用.

template is not equal to document. A document can contain many templates. template.find abstracts $, but template.find doesn't add any functionality. So template.$ and template.find will more or less perform equally. $ is a common alias for jQuery and when you pass a single string to the jQuery function it'll go through a few more abstractions and probably land on document.querySelector. That's why document.querySelector is a lot faster than jQuery (jsperf is down right now, so I can't tell you how much faster). jQuery is so much slower, that in most cases it'll probably a close call between document.querySelector and template.$.

通过保留包裹目标的节点，然后使用本机DOM函数，您将获得最佳性能.如果模板中有包装元素，则可以使用 template.firstNode 属性.否则，您只能执行大胆的操作:template.firstNode.parentElement.然后，我将使用getElementsByClassName或getElementById.它们比querySelector更快，因为使用querySelector必须首先解析查询.至少在大多数情况下，它取决于包装节点中的节点数量以及要搜索的元素在树中的距离.

You'll get the best performance by getting a hold of a node wrapping your target and then using native-DOM functions. If you had a wrapping element inside your template, you could use the template.firstNode property. Otherwise you can just do what blaze does: template.firstNode.parentElement. Then I'd use getElementsByClassName or getElementById. They are faster then querySelector because with querySelector the query has to be parsed first. At least most of the time it depends on the number of nodes in your wrapping node and how far inside the tree the element your searching for is.

这篇关于template.find()vs document.querySelector vs jquery vs template.$流星的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！