DEV Community

Cover image for Dom Diffing Algorithm Implementation In Vanilla JavaScript

Dom Diffing Algorithm Implementation In Vanilla JavaScript

Joydeep Bhowmik on March 18, 2023

If you have used any SPA framework like React or Vue then you might be familiar with the term "Virtual DOM". Whenever route path or state changes i...
Collapse
 
lexlohr profile image
Alex Lohr

Removing text nodes containing all spaces means that the following markup:

<p>this will <em>look</em> <strong>wrong</strong>
Enter fullscreen mode Exit fullscreen mode

will resolve to

this will lookwrong. There are a few edge cases around space in JSX.

Collapse
 
joydeep-bhowmik profile image
Joydeep Bhowmik • Edited

Thank you for pointing out. I will condition this to not remove those spaces, as soon as I'm free I'm going to fix this . I will let you know. As for a quick solution html space character will do the thing for now

Collapse
 
lexlohr profile image
Alex Lohr

A JSX compiler is more difficult than it should be, given the specs. Good luck to you.

Thread Thread
 
joydeep-bhowmik profile image
Joydeep Bhowmik • Edited

I have fixed this by conditioning it to remove only textNode that contains just newlines and spaces. Thank you very much for noticing the issue.

Thread Thread
 
rishabhkunwar11 profile image
Rishabh Kunwar

hey Joy, great article so just what was this issue and how you fixed it like is the blog updated with the fix of this issue and if yes can you please explain what the issue was and how it was solved coz i am also confused with extra text nodes added by Element.childNodes and it may break the code if not handled

Thread Thread
 
joydeep-bhowmik profile image
Joydeep Bhowmik • Edited

Thank you for your comment Rishabh.

The issue was that the code was unintentionally removing text nodes that contained only spaces. The goal was to remove unnecessary new lines from the parsed HTML while keeping important space intact.

and this was the solution that was added .

function clean(node){
...
if
    (
      child.nodeType === 8 
      || 
      (child.nodeType === 3 && !/\S/.test(child.nodeValue) && child.nodeValue.includes('\n'))
    )
    {
      node.removeChild(child);
      n --;
    }
...
}
Enter fullscreen mode Exit fullscreen mode

Let's break down the condition step by step:

child.nodeType === 3: nodeType is a property of a DOM node that represents the type of the node. The value 3 corresponds to a text node. So, this part of the condition checks if the child node is a text node.

!/\S/.test(child.nodeValue): \S is a regular expression pattern that matches any non-whitespace character. The test() method checks if the child.nodeValue (the text content of the node) does not contain any non-whitespace characters. In other words, it checks if the text node is empty or contains only whitespace characters.

child.nodeValue.includes('\n'): This part checks if the child.nodeValue (the text content of the node) includes a newline character ('\n'). It checks if the text node contains a line break.

Putting it all together, the condition checks if the child node is a text node, is empty or contains only whitespace characters, and includes a line break. This condition is typically used to identify and handle empty text nodes that might contain only whitespace or line breaks, ensuring they are not treated as significant content in the dom.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

10/10 post, kudos! 😁

Collapse
 
joydeep-bhowmik profile image
Joydeep Bhowmik

Thanks 😊

Collapse
 
artydev profile image
artydev

Great thank you

Collapse
 
joydeep-bhowmik profile image
Joydeep Bhowmik

Thank you for your feedback ☺️

Collapse
 
eerk profile image
eerk • Edited

This is a great explanation. My main question remains, will adding this virtual dom diffing code to my project actually make the DOM update faster? How can we measure this?

Collapse
 
joydeep-bhowmik profile image
Joydeep Bhowmik • Edited

Thanks for your comment.

DOM diffing is not faster than simply getting one element via getElementById and changing it. But If you think of large number of elements or a complex tree then changing some part of that tree rather than recreating the whole tree is definitely faster. Think of a clock application, for everytime the clock updates instead of changing the whole body we can just change a small textNode(representing the time).The less we change the real DOM, the better . But for small changes the innerHTML can be faster .
However the virtual DOM may not be perfect for your project . You can look into this (by svelte ) article to know why.

For the second question though it's not the ideal solution but you can try this to measure performance of your JavaScript code

console.time('total');
//your code
console.timeEnd('total');
Enter fullscreen mode Exit fullscreen mode

I recommend you to try svelte for your project . it complies everything down to pure minified JS and doesn't require any virtual DOM, doesn't get faster than this