javascript - 在 jQuery 中访问 DOM 元素的最有效方法是什么？

Question

我正在编写一个 jQuery 插件，我正处于优化阶段。

我想知道其中哪一个通常会导致更快的脚本，以及哪些缓解因素很重要:

1. 让脚本在开始时生成大量类和 ID，以便以后在 dom 中查找元素更容易(也更快？)。
2. 将类和 ID 保持在最低限度(这样可以通过不创建它们来节省时间)，但稍后会以更复杂的方式查找元素(例如对象中的第 n 个项目)，我认为这比通过 id 获取要慢/类。

Answer 1

浏览器的工作方式是在加载时创建一个内存中的 DOM 树，如下所示:

                                              P
                               _______________|______________
                              |                              |
                          childNodes                    attributes
                ______________|___________                   |
               |              |           |            title = 'Test paragraph'
         'Sample of text '   DIV   'in your document'
                              |
                          childNodes
                    __________|_______
                   |          |       |
           'HTML you might'   B     'have'

因此，当您查找 P > DIV > B 时，查找必须找到所有 P 元素，然后找到 P 中的所有 DIV 元素然后找到 DIV 中的所有 B 元素。嵌套越深，它需要做的查找就越多。此外，它可能会找到所有 P > DIV 却发现它们都没有 B 并且它会浪费时间查看所有 P > DIV 比赛。

按 ID 查找更快，因为 ID 保证是唯一的，因此 DOM 可以将它们存储为具有非常快速查找的哈希表条目。就 jQuery 而言，实现可能略有不同，但是，document.getElementById 具有最快的查找时间，因此 $('#my_node_id') 也应该非常快。

因此，如果您的节点没有 ID，您可以找到最近的有 ID 的祖先，并找到相对于该祖先的节点

#my_node_id > div > b

因为查找只需要在 #my_node_id 的子树下进行，所以比 p > div > b 更快