WebAssembly로 구현 된 가상 DOM asm-dom을 살펴 보았습니다.
asm-dom이란?
asm-dom은 WebAssembly로 구현된 가상 DOM 라이브러리입니다.
가상 DOM의 diff, patch 부분의 알고리즘을 WebAssembly에 맡긴 최소한의 구현이므로, React와 같은 다채로운 기능은 없는 것 같습니다. WebAssembly이므로 폭속을 기대합니다.
첫 커밋이 2017/2/26이므로 아직 일년도 지나지 않은 라이브러리입니다.
라이센스 표기 에는 snabbdom 의 이름이 있으므로 무언가 관계가 있을지도 모릅니다.
Simon Friis Vindum, 2015 as part of project snabbdom
사용법
C++에서도 쓸 수 있는 것 같습니다만, 이번은 web답게 js로 사용해 보았습니다.
npm i --save asm-dom
npm i -D arraybuffer-loader
webpack으로 번들 하기 때문에 webpack과 webpack-dev-server도 넣습니다.
npm i -D webpack webpack-dev-server
webpack.config.js는 이런 느낌.
.wasm
파일을로드하기 위해 arraybuffer-loader를 더합니다.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']
}
]
}
};
}
JS에서 사용하는 가벼운 문서 있기 때문에 그것에 따라 모양입니다.
virtual-dom과의 속도를 비교해 보았습니다.
가상 DOM 라이브러리 virtual-dom와 asm-dom의 속도를 비교해 보았습니다.
30000개의
div
텍스트를 임의의 숫자로 바꿔 시간을 내뿜어 보았습니다.사양 브라우저는 Chrome에서 버전 61입니다.
압도적으로 asm-dom이 더 빨랐다.
그 차이는 약 2배였다. 여기까지 차이가 나온다고는 생각하지 않았습니다. 과연 WebAssembly. virtual-dom이 원래 느린 것인지 의심하고 싶어집니다. React라든지 순수한 diff, patch의 처리만으로 속도를 비교해 보고 싶습니다.
asm-dom의 측정 결과
virtual-dom의 측정 결과
측정 코드
코드는 github의 저장소에 두었습니다.
DOM을 정의하는 방법은 hyperscript 바람이므로 virtual-dom과 마찬가지로
h()
로 노드를 만들어 patch()
에서 변경을 적응합니다.asm-dom
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
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);
Web Components도 시도해 보았습니다.
WebAssembly로 구현 된 가상 DOM asm-dom에서 Web Components를 사용해 보았습니다.
Reference
이 문제에 관하여(WebAssembly로 구현 된 가상 DOM asm-dom을 살펴 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kwst/items/e8a2505ec20c5021087b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)