What is “asm-dom”?
https://github.com/mbasso/asm-dom
asm-dom is a virtual DOM library using WebAssembly. Its “diff” and “patch” algorithm of virtual DOM are implemented by WebAssembly and it’s a minimal implementation so it doesn’t have high function as React. I expect it is very fast by WebAssembly.
The date of the initial commit is 2017/2/26 so it’s a year old.
Copyright and Lisense includes the name of “snabbdom”. It maybe related to snabbdom.
Simon Friis Vindum, 2015 as part of project snabbdom
Usage
It can be written by C++ but I used JS like WEB in this time.
npm i --save asm-dom
npm i -D arraybuffer-loader
I added webpack and webpack-dev-server to bundle by webpack.
npm i -D webpack webpack-dev-server
webpack.config is like this. I added arraybuffer-loader to load .wasm file. I refer to the document for JS.
var resolve = require('path').resolve;
module.exports = env => {
const dist = env.prod ? 'docs' : 'dist';
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, dist),
pathinfo: !env.prod,
},
node: {
fs: 'empty'
},
devtool: env.prod ? 'source-map' : 'eval',
devServer: {
contentBase: resolve(__dirname, dist),
historyApiFallback: true,
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /\.wasm$/,
loaders: ['arraybuffer-loader']
}
]
}
};
}
VS "virtual-dom"
I compared speed of "asm-dom" with "virtual-dom" that is a virtual DOM library. I measured the time of replacing 30000 text elements of <div>. I used Chrome ver61.
"asm-dom" won
"asm-dom" is 2 times faster than "virtual-dom". I never imagined this result. WebAssembly is awesome. I would like to compare also only "diff" and "patch" algorithm of React.
asm-dom result
virtual-dom result
The code for measuring
I uploaded the code into this.
You can define DOM like hyperscript so make nodes by h() and apply diff by patch() like as virtual-dom.
asm-dom code
import init from 'asm-dom';
init().then(asmDom => {
const { h, patch } = asmDom;
const root = document.getElementById('root');
let vnode = h('div', {}, []);
patch(root, vnode);
let cnt = 0;
const id = setInterval(() => {
console.time('apply patch in 30000 elements');
const list = [];
for (let i = 0; i < 30000; i++) {
list.push(
h('div', {}, [ Math.random() + '' ])
);
}
const newVnode = h('div', {}, list);
patch(vnode, newVnode);
vnode = newVnode;
console.timeEnd('apply patch in 30000 elements');
cnt++;
if (cnt >= 10) {
clearInterval(id);
}
}, 100);
});
virtual-dom code
const h = require('virtual-dom/h');
const diff = require('virtual-dom/diff');
const patch = require('virtual-dom/patch');
const createElement = require('virtual-dom/create-element');
let cnt = 0;
let tree = h('div', {}, []);
let rootNode = createElement(tree);
document.body.appendChild(rootNode);
const id = setInterval(function () {
console.time('apply patch in 30000 elements');
const list = [];
for (let i = 0; i < 30000; i++) {
list.push(
h('div', {}, [ Math.random() + '' ])
);
}
const newTree = h('div', {}, list);
const patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
console.timeEnd('apply patch in 30000 elements');
cnt++;
if (cnt >= 10) {
clearInterval(id);
}
}, 1000);
Top comments (0)