DOM-Element何时属于DOM树

时间:2015-01-09 16:33:09

标签: javascript dom

我最近做了一些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>

1 个答案:

答案 0 :(得分:2)

每个DOM元素都表示为JavaScript中的对象,无论它是否在文档中。文档中的DOM元素与文档中的 元素之间的差异是DOM元素的突变所具有的效果。

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

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