Problem: Say you have a function that takes a parent node and HTML string, which then renders the HTML as child nodes. On the next render, how would you know how much of the previous HTML was in the new HTML without having to parse the new HTML / create DOM nodes?
Another way to define the problem: I do a DOM diff for rendering HTML into a node. Think of it as a more efficient innerHTML update. However I am normally forced to parse the full HTML before even doing the diff. Even if html.startsWith() 90% of the previous HTML used. DOM creation is slower than string comparisons if and when possible.
E.g. Say the first HTML rendered was <b>1</b>
and 2nd HTML rendered is <b>1</b><b>2</b>
.
Clearly <b>1</b>
is already in the DOM and dont need an update. It is a substring of the previous HTML. Ideally we don't even need to create the DOM for diffing purpose.
Potential solution: