gpt4 book ai didi

javascript - 文档片段如何工作?

转载 作者:搜寻专家 更新时间:2023-10-31 23:19:30 24 4
gpt4 key购买 nike

任何人都可以简要解释一下 documentFragment 的实际作用吗?我一直在寻找一个明确的解释,但直到现在我还没有得到任何解释。

我读到的是,documentFragment 是类似于 DOM 的结构,我们可以在其中添加修改 DOM 元素而不会中断文档的实际流程。

我还读到,documentFragment 比将每个元素一个一个地附加到 DOM 更快。我觉得 documentFragment 不会每次都重新计算样式,所以速度更快。

我有两个例子,

以片段方式实现:

var frag = document.createDocumentFragment();
var div1 = document.createElement("div");
var div2 = document.createElement("div");
frag.appendChild(div1);
frag.appendChild(div2);
document.getElementById("someId").appendChild(frag);

以正常方式进行:

var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
div.appendChild(div1);
div.appendChild(div2);

document.getElementById("someId").appendChild(div);

以上两个示例中实际发生了什么?

最佳答案

“片段方式”和“正常方式”之间有一个重要的区别:

使用document.createElement :

const div = document.createElement('div');
div.appendChild(document.createTextNode('Hello'));
div.appendChild(document.createElement('span'));
document.body.appendChild(div);
console.log(div.childNodes); // logs a NodeList [#text 'Hello', <span>]

这导致以下 DOM 结构:

<body>
<div>
Hello
<span></span>
</div>
</body>

使用DocumentFragment :

const frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Hello'));
frag.appendChild(document.createElement('span'));
document.body.appendChild(frag);
console.log(frag.childNodes); // logs an empty NodeList

这导致以下 DOM 结构:

<body>
Hello
<span></span>
</body>

这意味着使用 DocumentFragment 的实例调用 appendChildinsertBefore 会将文档片段的子节点移动到新的父节点。之后,文档片段为空。

正如您正确提到的那样,创建文档片段并向其附加多个元素比将这些元素一个一个地附加到真实 DOM 更有效,这会导致浏览器每隔一段时间重新渲染页面的一部分时间。由于文档片段的内容在屏幕上不可见,因此页面只需重新呈现一次。

每当您创建大型 DOM 结构时,建议在文档片段中创建它并在完成后将其附加到 DOM。

关于javascript - 文档片段如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45540613/

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