哪个 jQuery 多元素选择器优化得更好

关键词：

【中文标题】哪个 jQuery 多元素选择器优化得更好【英文标题】：Which jQuery selector for multiple elements is better optimized 【发布时间】：2019-08-13 17:16:58 【问题描述】：

我有一个根据 AJAX 调用返回的数据构建的动态表。在构建表格的函数结束时，我需要将 jQuery UI 包装器应用到表格中的一些锚元素，这些元素由“map-marker”和“th-list”图标标识。 这两个选项哪个优化得更好？

$("#tblResults tbody tr td").find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

或

$("#tblResults tbody tr td a[data-icon='map-marker'], #tblResults tbody tr td a[data-icon='th-list']").button()

这个特定示例不会因为效率较低的方式而受到影响，但我在代码中的其他地方将回调函数应用于更大的表，这可能会有所不同。

【问题讨论】：

您需要测试它们以查看哪个性能更高。只看这两个，我会说第一个在 DOM 上性能更高，因为第二个 find() 在缩小的范围内运行，但第二个可能表现更好，因为它是单个操作。但这是你必须自己测试的东西，然后得出结论是否有任何时差如此重要。 并参考 Optimize Selectors 获取有关该主题的一些 jQuery 文档。 从我在大型 DOM 上的经验来看，这两者都不是最好的，尤其是这是真的。但是，请同时添加 HTML，以便我们在这里更好地为您提供帮助。 【参考方案1】：

参考这里：https://***.com/a/16423239/125981 现在这不是您的问题的完全重复，但将有助于解释您的问题作为补充。

第二个并不好，因为它会做这一切（我描述）两次，所以不是那个。现在如何实际改进第一个......

既然您提到了“多个”，那么我们首先获取对您的表的引用，然后将其缓存在一个变量中以避免多个 DOM 命中。

let myResultsThing = $('#tblResults');

现在我们有了 ID 引用的元素（这是最快的选择器）

为什么？让我们谈谈那个。这里使用的 Sizzle 引擎使用从右到左的选择器，所以 $("#tblResults tbody tr td") 表示的是 1. 查找所有 td，2. 过滤 td 中的 tr，3. 过滤那些对于 tbody 内的那些 4. 过滤那些落在由 id #tblResults 表示的元素内的那些

现在，如果您有 10 个表，每个表有 100 个td，每行有 10 行，每行有 3 个tbody，您会发现这是一项相当繁忙的工作。因此，通过首先隔离 ID，我们将很快消除 90% 以上的工作量。

好的，我们在上面有我们的表格引用方式。使用它我们可以找到tbody（或者更准确地说可能是多个tbody），从而消除页眉和页脚中的任何td。

let myTbodies = myResultsThing.find('tbody')
//get into the rest of it
.find('tr td').find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

现在我可能倾向于实际测试上述所有内容

myResultsThing.find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

根据您的 DOM 的具体外观，您可能会缓存（就像我在表格中所做的那样）清除到 TD 或 A 元素选择器，但我将把它留给您作为练习，因为我们在这里没有可以推测的标记.

【讨论】：

优化jquery选择器

优化jQuery选择器选择优化比以前更加重要，因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。jQuery扩展如果可能的话，避免使用jQuery... 查看详情

jquery选择器

jquery选择器选择器描       述基本选择器$("#id")选取id为id的元素$(".class")选取class为class的元素$("element")选取指定元素$("selector，selector...")选取多有匹配的元素层次选择器$("父元素  后代元素")选取... 查看详情

jQuery 选择器：获取子集的哪个更快？

】jQuery选择器：获取子集的哪个更快？【英文标题】：jQuerySelectors:Whichisfasterforgrabbingasubsetofchildren?【发布时间】：2011-04-2319:28:20【问题描述】：跟进this问题，我有以下两个选择：$("trtd").slice(3,6);可能是这样的（从算法上讲，我... 查看详情

jquery的五种选择器

1.$("#id"):id选择器,document.getElementById("id");2.$("div"):元素选择器document.getElementByTagName("div");3.$(".myClass"):类选择器,返回所有class="myClass"的元素4.$("*"):返回所有元素,多用于结合上下文搜索5.$("div,span,p.myClass"):多条件选择器 查看详情

jquery学习

jQuery选择器。记得在我做的一个自动化测试项目里面，涉及到大量DOM操作。每次对一个DOM元素操作之前，都要对每个元素进行一次判断。而jQuery获取网页中不存在的元素也不会报错。比如$(‘#tt‘)获取的永远是对象，即使网页上... 查看详情

jquery—选择器

Jquery强大之一：选择器。Jquery给我们提供了非常多的选择器。配合起来特别方便jQuery选择器*$("*")所有元素#id$("#lastname")id="lastname"的元素.class$(".intro")所有class="intro"的元素element$("p")所有<p>元素.class.class$(".intro.demo")所有class="in... 查看详情

jquery学习笔记-选择器

　　Jquery选择器与CSS选择器非常相似，CSS选择器提供诸多功能，同时两者在解析上均采用从右向左解析，因为在建立RenderTree时，若采用自左向右解析，没词匹配不成功均需要退回再进行匹配，而反向解析利用排除法，逐步缩小... 查看详情

如何优化 jQuery tag:contains() 选择器？

】如何优化jQuerytag:contains()选择器？【英文标题】：HowtooptimizejQuerytag:contains()selector?【发布时间】：2020-06-2117:36:15【问题描述】：我正在尝试从包含给定单词集的网页中提取所有元素。例如。鉴于我有一个随机单词数组words=["sky",... 查看详情

jquery选择器

JQuery选择元素   这是选择所有的p标签，并且将字体颜色改为红色，这里需要注意的是，在使用JQuery的选择方式，也就是$()时，我们要加‘’ ，切通过css的设置，我们可以改变其内的样式，我们来看JQ是如何... 查看详情

jquery学习笔记之选择器

 　目录： 　　　　选择器：　　　　　　　　　　　　　　　　　　　选择器应用优化　简单的伪类选择器  内容伪类选择器　显隐伪类选择器　子元素伪类选择器　表单对象伪类选择器　表单属性伪类选择器　... 查看详情

jQuery 选择器问题

...$(this).find(\'.action\')或$(\'.action\',this)性能？如果是的话，哪个更好，为什么？还有什么？【问题讨论】：【参考方案1】：这与每个jQuery文档(http://api.jquery.com/jQuery/)没有区别：在内部，选择 查看详情

前端性能优化jquery性能优化

一、使用合适的选择器$("#id");1.使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById();如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法，代码如下：$("#domo"... 查看详情

jquery的12种选择器

jQuery的12种选择器 1、#id:根据给定的ID匹配一个元素显示（用加粗的代替颜色）：这是第一个p标签2、*:匹配所有元素，多用于结合上下文来搜索显示：这是p标签这是div标签3、多选择器selector1,selector2,selectorN:指定任意多个选择... 查看详情

css基础组合选择器之多元素选择器多个元素加上同一个样式

 镇场诗：　　　　清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。　　　　学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。——————————————————————... 查看详情

jquery基本知识

1.选择器　　1.基本选择器 　　　　id$("#id")　　　　class$(".class")　　　　标签选择器$("p")　　2.组合选择器　　　　后代选择器$(".outerp")　　　　子代选择器$(".outer>p")　　　　多元素选择器$(".outer,#d1")　　3.属性选择器　... 查看详情

jquery中查找父元素，子元素,追加元素，插入元素和删除元素

Jquery之所以强大，和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器，而且多出了不少。所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个:$(‘*‘) 匹配页面所有元素$(‘#id... 查看详情

jquery学习--选择器

选择器：basic 　　$(‘button‘)html标签 　　$(‘#test‘)标签ID 　　$(‘.test‘)标签的class 　　$(‘.test,#test,h1‘)多选用逗号隔开 　　$(‘*‘)全选等级选中 　　$(‘divcode‘)选择所有在div下面的所有code元素，不考虑有多少层 　　$(... 查看详情

哪个更好：字符串 html 生成或 jquery DOM 元素创建？

】哪个更好：字符串html生成或jqueryDOM元素创建？【英文标题】：Whichisbetter:stringhtmlgenerationorjqueryDOMelementcreation?【发布时间】：2011-02-1100:46:43【问题描述】：好的，我正在我当前的项目中重写一些vanillaJS函数，并且我正处于为工... 查看详情