Plug: I help develop
million: <1kb virtual DOM - it's fast!
Generally speaking, the easiest way of changing the DOM ("Modifying the HTML") is to mutate the
innerHTML property on an element. For example, if I want to add a
div element in the document body, I could do something like this:
document.body.innerHTML = '<div>Hello World!</div>'; // <body> now has a <div>Hello World!</div> child.
This seems to be computationally performant, but it really isn't. While the action of reassignment is computationally performant, the DOM repaint ("Updating what the user sees") is not. This is because
innerHTML needs to parse DOM nodes from a string, preprocess, and append it, resulting in less-than-optimal performance. The issues with performance are increasingly noticable when there are more children/attributes and when the interval of mutation is shorter.
So, how is this issue fixed? Well, instead, we do pinpoint changes to the DOM. For example, this solution would be almost 10x faster than the
const div = document.createElement('div'); div.textContent = 'Hello World!'; document.body.appendChild(div);
While this is simple enough, once you start performing continous mutations, more complexity arises. This is why the virtual DOM was created - to allow you to write declarative content (like the string in the
innerHTML example) while harnessing performance by making only pinpoint changes to the DOM.
While this is efficient, it has some caveats. Notably, diffing is not computationally free. Traversing the trees have
O(n^3) time complexity, meaning the more children, the longer the time it will take to perform the action. To solve this, Million was created.
Read this article if you don't understand what the Virtual DOM is.
Million provides five major improvements: granular patching, fewer iterative passes, fast text interpolation, keyed virtual nodes, compiler flags.
- Granular patching: Instead of just replacing the entire element when there is a difference in props or children, only the necessary props are changed.
- Fewer iterative passes: Million attempts to reduce the amount of passes during diffing, allowing for better time and space complexity.
Fast text interpolation: Instead of replacing text nodes with DOM methods, Million uses compiler flags to set the
textContentof elements to boost performance.
- Keyed virtual elements: This allows for the patching algorithm to skip nodes if the new virtual element key is the same as the old one, minimizing the amount of unnecessary work.
- Compiler Flags: This allows for the patching algorithm to skip condition branches, meaning less work is done.
Thanks for reading! Drop a star to Million or follow/react to this article for more Virtual DOM content!