减少 Javascript 中的 DOM 搜索频率

Posted 2023-05-09

【中文标题】减少 Javascript 中的 DOM 搜索频率

【英文标题】：Reduce the DOM search frequency in Javascript

【发布时间】：2018-04-12 17:16:08

【问题描述】：

我正在从一个小项目中摆脱 Jquery 并使用 vanilla js 重新编写脚本。在当前代码中，有一个 jquery 实现来搜索 DOM 元素，然后使用 jquery 'find' 来搜索元素中的特定元素。

var ImageCapture =
    cacheDom : function()
        this.form = $('#drawingBoard');
        this.saveBtn = this.form.find('#saveBtn');
        this.image = this.form.find('#image');
        this.results = this.form.find('#results');
    

我已将上面的 Jquery 代码转换为 vanilla js，如下所示。

var ImageCapture =
        cacheDom: function () 
            this.form = document.getElementById('drawingBoard');
            this.saveBtn = this.form.querySelector('#saveBtn');
            this.image = this.form.querySelector('#image');
            this.results = this.form.querySelector('#results');
        
    

新的实现似乎运行良好，但我想确定它是否是使用 vanilla JS 替换 Jquery 实现的正确方法？

提前致谢。

【问题讨论】：

是的，没关系。它没有什么问题，或者可以改进。

对我来说还可以。您还可以将getElementById 替换为querySelector 以保持一致性

由于您只使用 ID 作为选择器，因此 getElementById 比 querySelector 性能略高。如果这很重要，您可能想要切换（尽管实际上它们之间的差异很小，除非您进行大量操作，否则您可能不会注意到任何差异）。除此之外，一切看起来都很好。

getElementById 这是选择元素的最快方法：jsperf.com/getelementbyid-vs-queryselector。反正看起来不错！！

感谢大家的回复。这种实现是否避免了进行多次 DOM 检查的需要？在 Jquery 实现中，DOM 搜索只进行一次，其余元素使用 .find 方法进行搜索。

【参考方案1】：

我制作了两个 jsfiddles 来向您展示纯 js querySelectorAll 和 jQuery 选择器之间行为的细微差别。您自然会期望它们的行为相同，但事实并非如此。

这里是纯js版本：https://jsfiddle.net/a81e2do3/

这里是 jQuery：https://jsfiddle.net/a81e2do3/1/

简而言之，如果你有这个 html:

div#a > div#b > div#c

如果你有一个#b 的普通 JS 元素节点对象，你可以做 b.querySelector('#a #c') 并成功选择 div#c，但你不能在 jQuery 中这样做（这 imo 更适合 jQuery 方式）。

【讨论】：

非常感谢@TKol！