我最近做了一些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>
答案 0 :(得分:2)
每个DOM元素都表示为JavaScript中的对象,无论它是否在文档中。文档中的DOM元素与文档中的 元素之间的差异是DOM元素的突变所具有的效果。
如果DOM元素不在文档中,则它不会影响当前视图,因此如果您将其变异,浏览器不必执行重排。回流是昂贵的,因此不必须这样做更快。
如果存在从元素到文档根目录的路径(document.documentElement
),则DOM元素位于文档中。