Javascript 重复克隆一组节点的最快方法

我对我为Knockout编写的一个插件很好奇，这个插件名为，即重复克隆一组节点并将它们注入DOM的最快方法是什么

在克隆过程中需要发生两件事，即，和

现在有一些适用的设计选择，包括：

源节点将是单个DOM实体的子节点

目标可能有不受DOM注入影响的兄弟节点，即并非所有子节点都会改变

源可以是

、

或常规HTML DOM节点

例如：

<template id='src'>ø</template>
<div id='target' data-bind='fastForEach: $data'>
</div>

虽然该示例是特定于KO的，但DOM操作的性能应该是一个相对通用的特性

正如您从上面链接的源代码中所看到的，到目前为止，我提出的方法是将源节点复制到一个数组中，然后克隆并将它们注入目标中所需的位置

---

是否有一种更快的方法来克隆和复制多个元素（例如，可能使用文档片段）？

您正在使用数据绑定。这本身将是缓慢的。最好的性能总是从dom中操作一个字符串，然后在一个go-element.innerHTML=“您的新html”中将其插入dom。最好不要将其放置在内联位置，因为这样会减慢浏览器的渲染速度。它主动地添加到dom中，是对浏览器渲染器的重击。请看-。

这里有一个有趣的问题，但它确实相当广泛。也许你可以试试？另一方面，实际的代码在一个链接的外部站点上，但我要说的是，相关的位需要在问题中，以防止链接腐烂c.q.使问题自包含。我认为CodeReview SE也是如此，在这里链接到完整的代码库是很受欢迎的，但是这个问题也应该有相关的代码。在克隆元素时，您是否需要担心“复制”事件和属性？或者仅仅复制属性就足够了？如果是后者，随着元素数量的增加，使用html字符串（通过获取和设置

innerHTML

）而不是使用实际的DOM元素几乎总是更有效；只是结构+属性；没有需要担心的事件和属性。正如您在限制#2中所注意到的，我们无法有效地使用

innerHTML

，因为并非给定节点的所有子节点都在更改。@Brandon最后一点：我仍然对此表示怀疑；我不敢相信开发商的“普遍意见”是如此“错误”；或者至少它是如此的黑白（+测试没有考虑到使用CSS样式集的实际“绘制”）。我在不久前开始了这个“问题”，请随意在那里分享您的想法：）。克隆过程中一个明显的优化是在源代码为

SCRIPT

时消除元素的双重克隆。将if条件更改为

else if（sourceNode.tagName=='SCRIPT'）{container.innerHTML=sourceNode.text；return container；}

。您还将在上执行额外（不必要的？）克隆

<template id='src'>ø <span data-bind='text: $data'></span></template>
<div id='target' data-bind='fastForEach: $data'>
  ø <span data-bind='text: $data'>1</span>
  ø <span data-bind='text: $data'>2</span>
  ø <span data-bind='text: $data'>3</span>
</div>