Javascript 在将元素追加到DOM之前，createElement()是否会触发回流混淆abt DocumentFragment行为

发布于01月22日

我试图找出当一个元素被创建时，回流或重绘到底是什么时候被触发的.

这样做的上下文是试图了解如果元素直到函数结束才被附加到DOM树中的现有项，是否需要DocumentFragment.下面是一个例子:

HTML:

<body>
   <div id=target> </div>
</body>

JS:

const ul = document.CreateElement("ul")

for (let i=0; i<100000; i++) {

   let li = document.CreateElement("li")
   let li_text = document.CreateTextNode("Node #: " + i)

   li.appendChild(li_text)
   ul.appendChild(li)

}

document.getElementById("target").appendChild(ul)

在本例中，是否每次在循环中创建&lt；li&gt；时都会触发回流？或者在将&lt；ul&>追加到&lt；div id=目标&gt；后仅触发一次回流？

如果是前者，防止这种多重重排的适当方法是:(1)创建文档片段，(2)将&lt；ul&>子项附加到该片段，(3)获取该&lt；ul&>子项并将其附加到它，然后(4)将该片段附加到&lt；div&>？

如果是后者...那么在这样的上下文中使用文档片段有什么好处呢？

语境

我的项目涉及动态创建许多列表--我正在进行性能优化，不确定如何监视或测试这种行为.通常我在Firefox上测试，Apache托管在本地目录中.

const frag = document.createDocumentFragment(); for (let i = 0; i < 100_000; i++) { // Note: There's no need to call createTextNode explicitly here const li = document.createElement("li"); li.textContent = `Node #: ${i}`; frag.appendChild(li); } document.getElementById("target-ul").appendChild(frag);

Javascript 在将元素追加到DOM之前，createElement()是否会触发回流混淆abt DocumentFragment行为

HTML:

JS:

语境

推荐答案

Javascript相关问答推荐

在JavaScript中对大型级联数组进行切片的最有效方法？

如何通过onClick为一组按钮分配功能;

当在select中 Select 选项时，我必须禁用不匹配的 Select

if/else JavaScript中的条件行为

使用i18next在React中不重新加载翻译动态数据的问题

当运行d3示例代码时，没有显示任何内容

我在我的Java代码中遇到了问题，代码的一部分看不到先前定义的对象

确保函数签名中的类型安全：匹配值

在使用位板时，如何在Java脚本中判断Connect 4板中中柱的对称性？

使用Nuxt Apollo在Piniastore 中获取产品细节

为什么客户端没有收到来自服务器的响应消息？

为什么我的按钮没有从&q；1更改为&q；X&q；？

如果一个字符串前面有点、空格或无字符串，后面有空格、连字符或无字符串，则匹配正则表达式

FireBase FiRestore安全规则-嵌套对象的MapDiff

JavaScript将字符串数字转换为整数

递增/递减按钮React.js/Redux

脚本语法错误只是一个字符串，而不是一个对象？

在传单的图像覆盖中重新着色特定 colored颜色的所有像素

如何调整下拉内容，使其不与其他元素重叠？

从客户端更新MongoDB数据库