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

Question

假设我在页面上有一个容器元素/ div。它外面还有其他元素，包括页面布局/ navingation，内部有相当多的内容。

在我的javascript中，我需要找到/操作该容器内的一些元素。如果所有这些元素都设置了id属性，那么使用document.getElementById()（考虑到一旦找到，需要将元素转换为jQuery对象进行操作）才能更好地找到它们，或选择它们他们使用jQuery如此：$("#id")，或先选择容器，将其存储在变量中，然后选择要使用jQuery操作的元素，如下所示：container.find("#id")？

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

Answer 1

由于内部使用jQuery()的{​​{1}} document.getElementById，直接使用本机方法显然更快。当然开销是可以忽略不计的（你永远不需要按id选择数百个元素），并且他们做了不同的事情 - 很可能你想得到一个包含DOM节点的jQuery包装器对象。

不过，

container.find(idselector)是一个有趣的案例。由于ID在整个文档中都是唯一的，因此您根本不需要这样的表达式。因此，id选择通常由浏览器内的O(1)查找表提升，即使对于完整文档也非常快。我不确定当你在容器中使用它时会发生什么，但它可能会回落到一个相当慢的DOM树遍历。