在jQuery中,对所有选择器使用[name = X]是个坏主意吗？

2023年3月1日 223次阅读

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

所以我会写(在HAML中)：

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

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

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

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

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

供参考：

>我有了这个主意,因为我最初使用的是Backbone.ModelBinding插件,它使用动态元素的数据绑定属性,但我现在正在远离它.
>我正在使用CoffeeScript,Backbone和haml_coffee模板.
>我还读过$(this.el).find(‘[name = title]’)比为选择器提供上下文要快.

后续问题：

A convention for indicating whether an HTML element is referenced from JS code

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

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

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

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

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

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

点赞