Отказ от ответственности:

Я слишком много болтал здесь, пытаясь предоставить достаточный контекст, чтобы упредить все вопросы, которые могут у вас возникнуть. меня. Не пугайтесь длины этого вопроса: большая часть того, что я написал, оченьлегко просматривается (особенно потенциальные решения, которые я придумал).

Цель:

Эффект, которого я надеюсь добиться, заключается в отображении одного и того же элемента (и всех потомков) в нескольких местах на одной странице. Мое текущее решение (подробнее см. ниже) включает в себя необходимость клонирования/копирования, а затем добавления во всех других местах, где я хочу, чтобы оно отображалось в DOM. Я прошу здесь лучшее (более эффективное) решение. У меня есть несколько идей потенциально более эффективных решений (см. ниже). Пожалуйста, оцените/покритикуйте/отклоните/дополните их или добавьте свое собственное, более блестящее решение!

«Почему?» ты спрашиваешь?

Что ж, элемент (и его потомки), который я хочу отобразить более одного раза, потенциально имеет множество атрибутов и содержимого, поэтому его клонирование и добавление в другое место (иногда более чем в одно место) может привести к быть довольно ресурсоемкой операцией манипулирования DOM.

Некоторый контекст:

Я не могу точно описать ситуацию (черт возьми NDA!), но по существуу меня есть WYSIWYG-редактор html-документов.Когда человек редактирует DOM, я фактически сохраняю «исходный» узел и «измененный» узел, заключая их оба в div, скрывая «исходник» и позволяя пользователю изменять новый («измененный») узел в свое удовольствие. Таким образом, пользователь может легко просмотреть внесенные изменения перед их сохранением.

Раньше я просто позволял пользователю перемещаться по «diff div» и временно отображал «исходный» узел, чтобы показать изменения «встроенные». Что я пытаюсь сделать сейчас, так это позволить пользователю увидеть весь «исходный» документ и его отредактированный («измененный») документ в параллельном представлении. И, возможно, я хотел бы сохранить изменения через несколько сеансов редактирования и одновременно показать N версий.

Текущее решение:

Мое текущее решение для достижения этого эффекта следующее:

Обернуть всю чертову часть (ну, кроме «панелей инструментов» и прочего, что они на самом деле не редактируют) в div ( которую я назову «pane1»), и создам новый div (который я назову «pane2»). Затем глубоко клонируйте содержимое панели 1 в панель 2, и в панели 1 отображаются только «исходные» узлы, а в панели 2 отображаются только «измененные» узлы (в областях различий — все, что находится за пределами этого, будет отображаться/скрываться переключателем в панель инструментов). Затем повторите это для панелей с 3 по N.

Проблема с текущим решением:

Если документ, который редактирует пользователь, становится слишком длинным или содержит изображения/видео (с разными атрибутами src) или содержит множество причудливых стилей (столбцы, таблицы и т. п.), то DOM потенциально может стать очень большим/сложным, и попытка клонировать и манипулировать им может замедлить сканирование браузера или умереть (в зависимости от размера/сложности DOM и количества клонов, которые необходимо создать, а также эффективности браузера). / машина, на которой он работает). Если размер является проблемой, я, конечно, могу сделать что-то вроде фактического удаления скрытых узлов из DOM, но это еще больше операций по манипулированию DOM, отнимающих ресурсы.

Возможные решения:

1. Найдите способ сделать модель DOM более простой/облегченной

, чтобы клонирование/манипулирование, которое я сейчас делаю, было более эффективным. (конечно, я стараюсь делать это, как могу в любом случае, но, возможно, это все, что я действительно могу сделать).

2. Создайте статические представления версий с помощью элементов Canvas или чего-то подобного.

Я слышал, что есть трюк, когда вы можете обернуть HTML в элемент SVG, затем использовать его в качестве источника изображения и нарисовать его на холсте. Я думаю, что эти статические холсты (canvi?) будут иметь гораздо меньший объем памяти, чем клонированные узлы DOM. И манипулирование DOM (скрытие/отображение соответствующих узлов), затем рисование изображения (промывание и повторение) должно быть быстрее и эффективнее, чем клонирование узла и манипулирование клонами.(может быть, я ошибаюсь в этом? Пожалуйста, скажите мне!)

Я пробовал это с ограниченными возможностями, но обертывание моего HTML в SVG приводит к путанице с тем, как он отображается в нескольких странных случаях - возможно, мне просто нужно чтобы немного сообщить элементам, чтобы они отображались правильно.

3. Найдите какой-нибудь волшебный элемент

, который просто ссылается на другой узел и выглядит/действует как он, но не является настоящим клоном (и, следовательно, каким-то волшебным образом становится намного легче). Даже если это означало, что я не мог манипулировать этим магическим элементом отдельно от узла, на который он «ссылается» (или его поддельных потомков) —в этом случае я все еще мог бы использовать это для неизмененных частей и, надеюсь, сократить некоторые операции использования памяти/манипуляции с DOM.

4. Выполните некоторые шаги на стороне сервера.

У меня есть возможность выполнять код на стороне сервера, так что, возможно, намного эффективнее (некоторые из моих пользователей могутработать на мобильных или старых устройствах) получать все ajax-y и отправлять соответствующие часть DOM (может быть «корнем» документа, который редактирует пользователь, или просто особенно тяжелыми «diff div») на сервер для клонирования / манипулирования, затем запросите управляемые сервером «клоны» и вставьте их в соответствующих панелях/местах.

5. Подделать его, чтобы он «чувствовал» себя более эффективным

Вместо того, чтобы выполнять все эти операции за один раз и заставлять браузер ждать, пока операции не будут выполнены для перерисовки пользовательского интерфейса, я мог бы выполнять операции в "фрагменты" и дайте браузеру повторно отобразить и передохнуть перед выполнением следующего фрагмента. Это, вероятно, на самом деле приведет к увеличению затрат времени, но для обычного пользователя это может «почувствоваться» быстрее (ха-ха, глупые дураки...). В конце концов, я полагаю, что пользовательский опыт является наиболее важным.

Сноска:

Опять же, я подписал соглашение о неразглашении, что не позволяет мне публиковать настоящий код здесь, как бы мне этого ни хотелось. Я думаюя подробно объяснил ситуацию (возможно, слишком подробно- если такая вещь существует), так что вам не нужно видеть код, чтобы дать мне общий ответ . Если нужно, думаю, я мог бы написать пример кода, достаточно отличающийся от IP моей компании, и опубликовать его здесь. Дайте мне знать, если вы хотите, чтобы я это сделал, и я буду счастлив вам помочь (ну, не совсем, но я все равно это сделаю).