jQuery - 性能访问元素答案

【问题标题】：jQuery - performance accessing elementsjQuery - 性能访问元素
【发布时间】：2012-01-05 21:01:12
【问题描述】：

我在我正在开发的应用程序中大量使用了 jquery ui 和 jqgrid。在我看到的大多数示例中，这些控件是使用 jquery 选择器访问的，以通过以下方式查找元素 id: $("#elementid")。

我的问题是，jquery 是否提供了足够好的性能来一遍又一遍地执行此操作，或者在第一次访问元素时保存对元素的引用是否更好： var elementName = $("#elementid");

并重用引用？

【问题讨论】：

【解决方案1】：

使用 JQuery 获取 ID 与 Javascript 中的 getElementById() 相同。

如您所见，here 使用直接引用比每次都在 DOM 树中搜索以获取对象要快。

IE8 getElementById：0.4844 毫秒 , IE8 id 数组查找：0.0062 ms

Chrome getElementById：0.0039 毫秒 , Chrome id 数组查找：0.0006 毫秒

这些是 10 000 次获得的结果。要查看基准测试的完整代码，请单击链接。

【讨论】：

【解决方案2】：

实际上 Jquery 的最佳实践是缓存引用。每次潜入 DOM 的成本都很高，正如我们（从 SO 创始人之一那里了解到的）performance is a feature。你可以在jQuery Fundamentals中查看各种 jQuery 最佳实践

【讨论】：

【解决方案3】：

定义和重用变量可能会稍微快一些，可能被认为是“最佳实践”，但$('#id') 映射到本机Element.getElementById，这对于大多数应用程序来说绝对足够快。即使您对数以千计的查找进行了测试，您也不会在人脑中发现明显的差异。

我会说这最终是编码风格的问题。

【讨论】：