我正在寻找任何可以提高 jQuery 调用的选择器性能的方法。具体是这样的：
是$("div.myclass")不是快$(".myclass")
我认为可能是这样，但我不知道 jQuery 是否足够聪明，可以首先通过标签名称等来限制搜索。有人对如何制定 jQuery 选择器字符串以获得最佳性能有任何想法吗？
提高 jQuery 选择器性能的好方法？
IT技术
javascript
jquery
performance
css-selectors
2021-01-24 22:42:38
6个回答
毫无疑问，先按标签名过滤比按类名过滤要快得多。
在所有浏览器本机实现 getElementsByClassName 之前，情况都是如此，就像 getElementsByTagName 的情况一样。
在某些情况下，您可以通过限制上下文来加速查询。如果你有一个元素引用，你可以将它作为第二个参数传递来限制查询的范围：
$(".myclass", a_DOM_element);
应该比
$(".myclass");
如果您已经有 a_DOM_element 并且它比整个文档小得多。
正如 Reid 上面所说，jQuery 是自下而上工作的。虽然
这意味着
$('#foo bar div')比$('bar div #foo')
这不是重点。如果你有#foo，无论如何你都不会在选择器之前放置任何东西，因为 ID 必须是唯一的。
重点是：
- 如果你是从一个ID元素subselecting什么，然后选择后，然后再使用
.find，.children等：$('#foo').find('div') - 选择器的最左边（第一）部分可能效率较低，缩放到最右边（最后）部分应该是最有效的 - 这意味着如果您没有 ID，请确保您正在寻找
$('div.common[slow*=Search] input.rare')而不是$('div.rare input.common[name*=slowSearch]')- 因为这不是' t 始终适用确保通过相应的拆分来强制选择器顺序。
为了完全理解什么是更快，您必须了解 CSS 解析器的工作原理。
您传入的选择器使用 RegExp 拆分为可识别的部分，然后逐个处理。
一些选择器，如 ID 和 TagName，使用浏览器的本地实现，速度更快。而其他像类和属性这样的程序是分开编写的，因此速度要慢得多，需要循环选择元素并检查每个类名。
所以是的，回答你的问题：
$('tag.class') 比 $('.class') 更快。为什么？对于第一种情况，jQuery 使用本机浏览器实现将选择过滤为您需要的元素。只有这样它才会启动较慢的 .class 实现过滤到您要求的内容。
在第二种情况下，jQuery 使用它的方法通过抓取类来过滤每个元素。
这比 jQuery 传播得更远，因为所有 javascript 库都基于此。唯一的其他选择是使用 xPath，但目前所有浏览器都不太支持它。
以下是提高 jQuery 选择器性能的方法：
- 尽可能按 #id 选择（性能测试结果约快 250）
- 指定选择范围 (
$('.select', this))