Algorithm to update only the changed innerHTML of the document

Question

I have 2 JS variables. before and after. They contains the SAME html document, but have some modification. About 1%-10% change between them. I want to update the body from before to after. The variablesbefore and after are raw string.

I can do something like that:

document.documentElement.innerHTML=after

The problem is that if I render this way it not look good. The render takes time, and there is a white screen between the renders. I want to show the user 10 modification in a second (video of modifications)

So what I want to do. I want to search and find only the elements that changed only by analyze the HTML text of before and after.

My way of solution:

I can find the changes and the position in the text using Javascript Library for diff & match & patch.

The question is:

After I find the text changes. How to find only the elements who changed. I update only those elements.

I thought, maybe to create a range, that contains every change, and update the range, but how exactly to do that?

If anything unclear, please comment, I will explain better.

Answer 1

I found a very good library for it: https://github.com/patrick-steele-idem/morphdom

Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM here!

Very easy to use, and doing exactly what I need