jquery: $("???") 什么时候扫描整个 DOM？答案

【问题标题】：jquery: when does $("???") scan the whole DOM?jquery: $("???") 什么时候扫描整个 DOM？
【发布时间】：2010-11-30 20:52:41
【问题描述】：

当使用 $("#xxx") 时，我猜 jQuery 使用 getElementById。

$(".xxx") 每次扫描整个 DOM 怎么样？

【问题讨论】：

jQuery 可能不会缓存查询结果。
在此处查看源代码（点击大按钮）：code.google.com/p/jqueryjs/downloads/…
哦，现在 jQuery 使用 Sizzle 选择器引擎。（均由 John Resig 撰写）

标签： javascript jquery

【解决方案1】：

许多浏览器不支持 getElementsByClassName 作为原生 DOM 函数，因此 jQuery 必须通过检查每个元素的类来自己完成这项工作。

【讨论】：

但我记得上次在 gEBCN 之前它确实尝试使用任何 Selector API 方法？那么最小的公分母就是循环遍历每个元素 clsas。

【解决方案2】：

jQuery 尝试使用最快的选择方法来获得您所要求的。有许多与 jQuery 直接相关的性能优化技巧的好资源：

Good ways to improve jQuery selector performance?

http://www.artzstudio.com/2009/04/jquery-performance-rules/

http://www.componenthouse.com/article-19

http://www.learningjquery.com/2006/12/quick-tip-optimizing-dom-traversal

【讨论】：

【解决方案3】：

参见context argument 到$ 函数。如果未提供，则默认为整个 document。

所以回答你的问题：

$('whatever'); // scans the entire `document`

$('whatever', element); // scans only within element

【讨论】：

所以这基本上就像在做 element.find('whatever') ？

【解决方案4】：

这是 document.getElementsByClassName 的兼容性表：http://www.quirksmode.org/dom/w3c_core.html#gettingelements

getElementsByClassName 的绿色浏览器不需要对 $(".className") 选择器进行完整的 DOM 扫描，而是使用浏览器原生方法。红色的会慢一些。

尽管有数千个元素，但差异并不像您想象的那么明显。

【讨论】：

【解决方案5】：

$(".xxx") 每次扫描整个 DOM 怎么样？

如果你不做缓存：是的。缓存很简单：

var $myCachedElements = $('.myElements'); // DOM querying occurs

$myCachedElements.animate({left: '1000px'}, 'slow'); // no DOM Querying this time, as long as you use the variable.

【讨论】：