Javascript 使用document.getElementById（id）、$（id）和containerElement.find（id）的速度差异

假设我在页面上有一个容器元素/div。除此之外还有其他元素，包括页面布局/导航，其中包含大量内容

在我的javascript中，我需要在容器中查找/操作一些元素。如果所有这些元素都设置了id属性，从速度上看，使用

document.getElementById（）

（考虑到一旦找到，元素将需要转换为jQuery对象进行操作）来查找它们，或者使用jQuery选择它们，就像这样：

$（“#id”）

，或者先选择容器，将其存储在变量中，然后使用jQuery选择要操作的元素，如：

container.find（“#id”）

哪种方法更快？像这样的搜索速度取决于什么？

因为带有id选择器的

jQuery（）

使用

document.getElementById

在内部，直接使用本机方法显然更快。当然，开销是可以忽略的（您永远不需要按id选择数百个元素），它们做不同的事情——很可能您想要得到一个包含DOM节点的jQuery包装器对象

container.find（idselector）

是一个有趣的例子。由于ID在整个文档中都是唯一的，所以根本不需要这样的表达式。因此，id选择通常通过浏览器中的

O（1）

查找表来增强，甚至对于完整文档也是非常快速的。我不确定在容器中使用它时会发生什么，但它可能会返回到相当慢的DOM树遍历过程。

因为带有id选择器的

jQuery（）

使用

document.getElementById

在内部，直接使用本机方法显然更快。当然，开销是可以忽略的（您永远不需要按id选择数百个元素），它们做不同的事情——很可能您想要得到一个包含DOM节点的jQuery包装器对象

---

container.find（idselector）

是一个有趣的例子。由于ID在整个文档中都是唯一的，所以根本不需要这样的表达式。因此，id选择通常通过浏览器中的

O（1）

查找表来增强，甚至对于完整文档也是非常快速的。我不确定在容器中使用它时会发生什么，但它可能会退回到相当慢的DOM树遍历过程。

经验法则：不要过早优化。做任何看起来最简单、最清楚的事情。可能，$（…）是。然后，只有当速度太慢时，才尝试其他选项，看看它是否足够快。记住，它不需要尽可能快，只需要足够快。当使用

$（“#id'）

时，jQuery在引擎盖下使用

getElementById

。经验法则：不要过早优化。做任何看起来最简单、最清楚的事情。可能，$（…）是。然后，只有当速度太慢时，才尝试其他选项，看看它是否足够快。记住，它不需要尽可能快，只需要足够快。当使用

$（“#id'）

容器时，jQuery在引擎盖下使用

getElementById

。find（idselector）确实会返回到较慢的DOM树遍历：

querySelectorAll

。除非您使用的浏览器不支持

querySelectorAll

。然后它又回到了一个慢得多的方法@Stephen：谢谢您的确认，我不想在Sizzle源代码中查找它：-）尽管如此，仍然可能存在对id选择器的内部优化，这使得树遍历成为多余的

容器。find（idselector）

确实会回到较慢的DOM树遍历：

querySelectorAll

。除非您使用的浏览器不支持

querySelectorAll

。然后它又回到了一个慢得多的方法@斯蒂芬：谢谢你的确认，我不想在Sizzle源代码中查到这一点：-）尽管如此，仍然有可能对id选择器进行内部优化，这使得树遍历变得多余