Question

我对我为Knockout编写的插件有一个好奇心，叫做knockout-fast-foreach，这是重复克隆一组节点并将它们注入DOM的最快方法。

克隆需要做两件事，即copying out the source template nodes和injecting them back into the DOM。

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

源节点将是单个DOM实体的子节点;
目标可能让兄弟姐妹不受DOM注入影响，即并非所有子节点都可能发生变化;
源可以是<template>，<script>或常规HTML DOM节点。

例如：

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

当使用ko.applyBindings([1, 2, 3], document.getElementById('target'))应用绑定时，结果将是：

<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>

虽然该示例是KO特定的，但DOM操作的性能应该是一个相对普遍的特性。

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

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

Answer 1

您正在使用数据绑定。这本身就会很慢。最好的表现总是从dom中操纵一个字符串，然后一次性将它插入到dom中 - element.innerHTML =“你的新html”。更好的方法是将它放在内联中，因为这会降低浏览器的渲染速度。 Itereratively添加到dom是颠倒浏览器渲染器。见 - http://davidwalsh.name/css-js-animation。

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

1 个答案: