在jQuery中,对所有选择器使用是个坏主意吗?

我正在使用Backbone,并决定我想要一种方法来区分绑定的HTML元素和不绑定的HTML元素。

所以我会写(在HAML中):

.container .title(name='title') .separator 

正如您所看到的,动态元素很明显是标题。

这样做的原因是我可以搞乱风格并重命名类而不用担心破坏应用程序。 它还意味着在模板中我可以告诉动态元素是什么,而无需与Backbone View来回。

这意味着我使用$('[name=title]', this.el)从代码中引用此元素。 我想知道这是否缓慢,如果在任何地方使用都是一个明显的问题。 我读过id很快。 我正在使用项目列表,因此id不切实际。 class如何与name查找进行比较?

此外,如果您有关于跟踪HTML模板中的动态元素的建议,我很乐意听到它们。


供参考:

  • 我有了这个想法,因为我最初使用的是Backbone.ModelBinding插件,它使用动态元素的data-bind属性,但我现在正在远离它。

  • 我正在使用CoffeeScript,Backbone和haml_coffee模板。

  • 我还读过$(this.el).find('[name=title]')比为选择器提供上下文要快。


后续问题:

用于指示是否从JS代码引用HTML元素的约定

更新了jsperf以测试所有建议:

http://jsperf.com/class-or-name-attr-lookup/3

搜索DOM元素的name属性可能比类慢一点,因为需要Sizzle(jQuery使用的选择器引擎)需要解析选择器以确定需要找到的确切内容。 Sizzle需要从字符串“[name = title]”确定它首先需要查看所有被搜索元素的“name”属性,并且该属性的值完全是“title”。 虽然我已经读过Sizzle它的速度非常快我只能猜测它会比DOM元素属性的本机JavaScript调用慢 – 类(element.className) – 值。

为了证实我的怀疑,我做了一个表演: http : //jsperf.com/class-or-name-attr-lookup 。 结果不是我在.find和.children调用中所怀疑的,但我上面所述的内容似乎至少在前两个例子中得到了支持。 但是,我在使用最具体的选择器时看到了生产代码中的性能提升 – 例如.children而不是.find – 因为它没有循环遍历不必要的元素。

此外,我前一段时间做了一个测试,以阐明使用简单的选择器语法和一些更模糊和/或jQuery-ish语法之间的一些差异来比较我认为有趣的性能: http : //jsperf.com/id -id-vs-id-class / 2 。

我希望一些或任何一个可以帮助任何人。

名称查找可能并不比类查找差,但考虑到使用您指定的选择器,它必须枚举所有DOM元素才能找到它。 如果我是你,我至少会指定你需要的类型:

 this.$("div[name=title]") 

另请注意您可以在骨干视图中使用的简写; 这。$是$(this.el).find的快捷方式,在function上与$(selector,this.el)相同

编辑

为了回答你为什么会这样做的进一步问题,DOM中没有任何函数会返回具有特定类名的所有元素; 可能有一些我不知道的更新的东西,但如果是这样的话,快速谷歌搜索还没有提出来。 您可以在此处查看使用特定类查找DOM节点的示例实现。

由于该算法需要循环遍历集合中的所有元素,因此检查name属性并不比检查class属性更昂贵。 (请注意,我实际上没有对此进行基准测试,但我不知道有任何理由怀疑不同)。

这就是我建议至少指定DOM元素类型的原因; 如果使用$(“[name = title]”)之类的选择器,则jquery将被强制枚举DOM中的每个元素以找到您要查找的内容; 在这种情况下,您只搜索DOM的一小部分(您的视图中的子项),这样就不会出现问题,但是如果您指定了类型,例如$(“div [name = title] “)那么它至少可以在可用的情况下使用getElementsByTagName进行优化。

(我说可用,因为我相信某些浏览器允许在DOM节点的子集上调用getElementsByTagName而在文档上只调用一些浏览器)