An Interest In:
Web News this Week
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
Exploring Blockdom: Fastest Virtual DOM (ever!)
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:
Ryan Carniato@ryancarniatoDid someone tell you the Virtual DOM was slow?
Check out Blockdom a VDOM library that even gives @solid_js a run for its money.
github.com/ged-odoo/block
Official JS Framework Results:21:48 PM - 08 Sep 2021
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 typesconst 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 treeconst tree = block([], [subBlock(["blockdom"])]);// mount the treemount(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.
by @aidenybai
Hi! Aiden here, author of Million. I hope you find it easy to use and powerful enough for all your use cases. If you have any issues or suggestions, please open an issue!
If you're interested in tuning into the development and future of Million, please leave a star :)
-Aiden (@aidenybai)
What is Million?
Million is a lightweight (<1kb
) compiler-augmented Virtual DOM. It's fast!
Current Virtual DOM implementations are inadequateRanging from overcomplicated to abandoned, most are unusable without sacrificing raw performance and size.
Million aims to fix this, providing a library-agnostic Virtual DOM to serve as the core for Javascript libraries that focus on precompilation and static analysis.
Learn Million in 10 minutes!
Why Million?
- Built for libraries that compile
- Lightweight bundle size (<1kb brotli+min)
- Fast runtime operations
- Composable using drivers
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.
blockdom
Probably the fastest virtual dom library in the world
blockdom
is a very fast virtual dom library. Its main sellingpoint is that it does not represent DOM element by element, but instead block byblock, where a block is an element with all its static content and some specialtags to indicate dynamic content. This allows blockdom to use cloneNode(true)
on blocks and speed up the diff process, since the vdom tree is much smaller.
It features blocks, supports fragments, manage synthetic event handlers and moreNote that it is not a framework. It does not even have the concept of componentsblockdom
is intended to be a lower level layer of abstraction, on top of whichother frameworks could be added. See the documentation for a tutorial on thattopic.
How to Install
NPM
npm i blockdomyarn add blockdom
CDN
https://unpkg.com/blockdom@{VERSION}/dist/blockdom.iife.min.js// for the latest
Original Link: https://dev.to/aidenybai/exploring-blockdom-fastest-virtual-dom-ever-28nl
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To