DOM-Element 什么时候属于 DOM-tree

Question

我最近在做一些 DOM 测试，所以我遇到了一个我还没有找到明确答案的问题。当您使用 document.createElement(...) 创建 DOM-Element 但您没有通过例如 [ElementInDom].appendChild(...) 将其附加到 DOM 时。这个 DOM 元素是否像 Javascript 中的任何其他字符串或数组等一样处理，或者文档是否在将其添加到 DOM 之前处理对 DOM 元素的访问？

我编写了一个小测试，它确实表明访问未附加到 DOM 的 DOM-Element 比访问附加到文档的 DOM-Element 更快（而不是通过将其设置为 display: none 来呈现）。但要求确定。我故意只把它放到 DOM-tree 上而不是 Render-tree 上。

测试是Here

<html>
<body>

<ul style="display:none;"></ul>

<script>
    var inDOM = document.getElementsByTagName('ul')[0];
    var noDOM = document.createElement('ul');
    var array = [];

    var start1 = new Date();

    for (var i=0; i<1000000; i++) {
        inDOM.appendChild(document.createElement('li'));
    };

    var end1 = new Date() - start1;

    var start2 = new Date();

    for (var i=0; i<1000000; i++) {
            noDOM.appendChild(document.createElement('li'));
    };

    var end2 = new Date() - start2;

    var start3 = new Date();

    for (var i=0; i<1000000; i++) {
        array[i] = document.createElement('li');
    };

    var end3 = new Date() - start3;

    console.log('in DOM: ' + end1);
    console.log('not in DOM: ' + end2);
    console.log('to Array: ' + end3);
</script>

</body>
</html>

Answer 1

每个 DOM 元素在 JavaScript 中都表示为一个对象，无论它是否在文档中。文档中的 DOM 元素和文档中 not 的 DOM 元素的区别在于对 DOM 元素的突变所产生的影响。

如果 DOM 元素不在文档中，它不会影响当前视图，因此如果您改变它，浏览器就不必执行重排。回流很昂贵，所以不必须这样做更快。

如果存在从元素到文档根目录 (document.documentElement) 的路径，则该 DOM 元素位于文档中。