gpt4 book ai didi

javascript - DOM 元素何时属于 DOM 树

转载 作者:行者123 更新时间:2023-12-02 16:36:47 24 4
gpt4 key购买 nike

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

我编写了一个小测试,它确实表明访问未附加到 DOM 的 DOM-Element 比访问附加到文档的 DOM-Element 更快(并且不通过将其设置为 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>

最佳答案

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

如果 DOM 元素不在文档中,则它不会影响当前 View ,因此如果您对其进行更改,浏览器不必执行回流。回流焊的成本很高,因此不必进行回流焊速度会更快。

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

关于javascript - DOM 元素何时属于 DOM 树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27865035/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com