У меня есть любопытство с плагином, который я написал для 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 должна быть относительно универсальной характеристикой.
Как вы можете видеть из связанного исходного кода выше, способ, которым я пришел до сих пор, заключается в том, чтобы скопировать исходные узлы в массив, затем клонировать + вставлять их в цель в нужную позицию.
Возможно ли, что существует более быстрый способ клонирования и копирования нескольких элементов (например, с использованием фрагментов документа)?
У вас есть интересный вопрос здесь, но он довольно широк. Возможно, вы можете попробовать [CodeReview.StackExchange.com] (http://CodeReview.StackExchange.com)? На стороне примечание, фактический код находится на связанном внешнем сайте, но я бы сказал, что соответствующие биты должны быть в вопросе, чтобы предотвратить гниль ссылки c.q. сделать вопрос самодостаточным. Я думаю, что то же самое относится и к CodeReview SE, где ценятся ссылки на полные кодовые базы, но ожидается, что у вопроса будет соответствующий код. – Jeroen
Вам нужно беспокоиться о «копировании» событий и свойств при клонировании элементов? Или достаточно копировать атрибуты? Если это последний, по мере увеличения количества элементов, почти всегда будет работать более эффективно работать с html-строками (путем получения и установки 'innerHTML') вместо работы с фактическими элементами DOM. – Brandon
Спасибо @Brandon; просто структура + атрибуты; нет никаких событий и свойств, о которых можно беспокоиться. Как вы можете заметить, хотя из ограничения №2 невозможно эффективно использовать 'innerHTML', поскольку не все дочерние элементы данного узла могут меняться. –