如何使用JavaScript动态创建拥有10万个以上节点的树形结构？

15 min read

创建10万个节点的树可能会造成浏览器性能问题，但是你可以尝试以下代码：

function createNode() {
  const node = document.createElement("div");
  node.innerText = "Node";
  return node;
}

function createTree(depth, numChildren) {
  const root = createNode();
  if (depth === 0) {
    return root;
  }
  for (let i = 0; i < numChildren; i++) {
    const child = createTree(depth - 1, numChildren);
    root.appendChild(child);
  }
  return root;
}

const tree = createTree(5, 10);
document.body.appendChild(tree);

这里的createNode()函数创建一个div节点，并将其内部文本设置为"Node"。createTree(depth, numChildren)函数递归地创建树，如果递归到了指定的深度，那么就返回一个叶节点。否则，它将创建一个指定数量的子节点，并将它们附加到当前节点上，最后返回根节点。最后一行将树附加到<body>元素上。你可以根据需要将depth和numChildren参数设置为不同的值来创建具有不同深度和分支数量的树。