Question

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

我编写了一个小测试，它确实表明访问未附加到DOM的DOM元素比访问附加到文档的DOM元素更快（并且不通过将其设置为display：none来呈现）。但要确定。它是故意的，我只把它放到DOM树而不是渲染树。

测试是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元素与文档中的元素之间的差异是DOM元素的突变所具有的效果。

如果DOM元素不在文档中，则它不会影响当前视图，因此如果您将其变异，浏览器不必执行重排。回流是昂贵的，因此不必须这样做更快。

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

DOM-Element何时属于DOM树

1 个答案: