If you've been around in the JavaScript UI library development space, you've likely heard about blockdom, which claims to be probably the fastest Virtual DOM that currently exists.

Its even been praised by Ryan Carniato as an example of hyper performant Virtual DOM, even being comparable to Solid.js' performance:

Blockdom is really fast

Compared with other virtual DOMs (see snabbdom, virtual-dom), it's significantly faster. These older methods use node-by-node diffing, or the traversal and comparison of the node tree in order to calculate the optimal DOM modifications to reduce reflow and repaints.

The main way that Blockdom can achieve such high performance is by performing block-by-block diffing. Why are we doing node-by-node diffing when we know most trees will be static? We have a serialized version of the block, and we can do super simple string comparisons O(1) instead of tree traversals O(n).

Old method:

[A, B, C, D] diff() [A, B, C, D]

New Method

'A,B,C,D' === 'A,B,C,D'

Additionally, creating elements is much faster. Instead of individually creating elements and constructing a DOM node tree, we can just used the serialized format of the block and use the cloneNode(true) method to quickly create a DOM tree.

Here's what the syntax looks like:

// create block types
const block = createBlock(`<div class="some-class"><p>hello</p><blockdom-child-0/></div>`);
const subBlock = createBlock(`<span>some value: <blockdom-text-0/></span>`);

// create a blockdom virtual tree
const tree = block([], [subBlock(["blockdom"])]);

// mount the tree
mount(tree, document.body);

// result:
// <div class="some-class"><p>hello</p><span>some value: blockdom</span></div>

As you can see, Blockdom makes some tradeoffs in order to achieve best performance. The blockdom-child syntax is somewhat awkward, but it is necessary in order to create the block tree.

You can read more about blockdom performance here

Generalized Blocks

So how can we learn from Blockdom and make existing Virtual DOM implementations better? I've been exploring this concept with Million.js.

aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.

Want to automatically find and fix performance issues? Check out Million Lint.

📚 Read the docs

🎦 Watch video

💬 Join our Discord

🌐 Follow on Twitter

What is Million.js?

Million.js is an extremely fast and lightweight optimizing compiler that make components up to 70% faster.

Oh man... Another /virtual dom|javascript/gi framework? I'm fine with React already, why do I need this?

Million.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing (try it out here)

TL;DR: Imagine React components running at the speed of raw JavaScript.

👉 Setup Million.js in seconds! →

Installation

The Million.js CLI will automatically install the package and configure your project for you.

npx million@latest

Once your down, just run your project and information should show up in your command line!

Having issues installing? → View the installation guide

…

View on GitHub

Million.js intends to use the compiler to reduce computational work of diffing, and blocks are a great way to do this. Million.js forgoes the slightly awkward syntax, focusing on two main concepts: the ability to do string comparison and cloneNode(true).

This way, you don't need to construct a block and recall it every time you render. You just construct as you want, and it will handle the rest for you.

This way, it's super simple syntax without much tradeoff.

import { render } from 'million';
import { block } from 'million/block';

render(document.body, block('<div>Hello World</div>'));

You can read up about blocks in Million here.

Conclusions

Blockdom presents exciting new ways to optimize Virtual DOM, making it a viable contender for ways we can optimize rendering in the future.

Other Virtual DOM libraries should take inspiration from Blockdom and conduct research into how block-like structures can help make Virtual DOM rendering a contender in hyper-performant rendering libraries.