javascript - 在 JavaScript 中，在函数内部创建的未附加到 DOM 树的节点是否会导致空间困惑？

Question

我习惯在顶部 block 的作用域中声明每个变量，以提高代码的可读性。我怀疑函数作用域内未添加到文档正文中的节点会导致空间困惑并降低性能。他们会怎样？一般来说，在函数作用域内创建的变量会发生什么情况？函数执行后它们会被销毁吗？我需要担心内存的释放吗？在作用域的最顶层 block 声明变量是一个好习惯，还是只在需要它们或某些条件成立时才在现场声明它们更好？这有助于提高运行时性能吗？

假设一个像这样的函数:

function myfunc() {
    var someNode = document.createElement('div');
    if(someCondition) { // add the node only if some condition is true
        document.body.appendChild(someNode);
    }

V.S 像这样的函数:

function myfunc() {
    if(someCondition) { // create and add the node only if some condition is true
        var someNode = document.createElement('div');
        document.body.appendChild(someNode);
    }
}

Answer 1

Javascript 通过垃圾收集实现自动内存管理。如果作用域内没有变量引用某条数据，则应回收内存。因此，在您的示例中，当函数退出时(或不久之后，下一次垃圾回收发生时)，未使用的 DIV 将被销毁。

但是，最好避免创建不需要的对象。这需要时间，并且在函数运行时会消耗内存。对于小型、简单的对象(即使用文字 {...} 语法创建的对象)和数组来说，这还不错，但节点是非常复杂的对象。