Ich suche nach einer JavaScript-Diff-Engine, die den Unterschied in der Struktur zweier HTML-Teile zurückgibt. Das heißt, statt "an dieser Linie, bei diesem und jenem Charakter, geschah etwas", wäre es, "dieses Element wurde nach diesem Element eingefügt" oder "dieses Element wurde entfernt", oder "dieser Textknoten war geändert ", etc.
Cursory Forschung schlägt vor das ist hart .
Das spezifische Szenario ist, dass ich eine Live-Vorschau des Markdown-Texteditors habe. Es funktioniert gut mit nur Text, aber sobald ein Nutzer zum Beispiel ein YouTube <iframe> einbucht, wird er bei jedem Tastendruck neu gerendert / neu geladen, was absurd teuer ist. Große Bilder sind auch schwierig, weil sie beim Laden aus dem Cache (zumindest in WebKit) einen ekelhaften Jitter-Effekt verursachen.
Was wäre schön, wäre ein Ersatz für jQuery.html() , das anstelle der HTML-Inhalte tatsächlich das Alte mit dem Neuen vergleicht und selektiv aktualisiert / eingefügt / angehängt, so dass die unveränderten Elemente in Ruhe gelassen werden.
node.cloneNode(true) ) beide Knoten, wenn sie gerade verwendet werden (d. h. wenn in Ihrem JavaScript auf untergeordnete Knoten verwiesen wird). node.normalize() . node.isEqualNode(other_node) . Um ehrlich zu sein, ist es viel besser, eine Text-Diff-Lib zu verwenden, anstatt eine eigene DOM-basierte Diff-Bibliothek zu erstellen.
Tags und Links javascript html diff