Blockdomを探索する:最速仮想DOM(これまで)

JavaScriptのUIライブラリの開発スペースにいたなら、あなたはおそらく約blockdom , は、おそらく存在する最速の仮想DOMであると主張する.
それも、ハイパーパフォーマー仮想DOMの例として、Ryan Caginatoによって賞賛されました.JSパフォーマンス


ライアンの肉食
ライヤナギ

誰かがあなたに仮想DOMを教えてくれましたか?Blockdomは、そのお金のための実行を与えるVDOMライブラリをチェックしてください.github.com/ged-odoo/block… 公式jsフレームワーク結果
午後21時48分

ブロックは本当に速い
他の仮想ドームと比較してsnabbdom , virtual-dom ), それはかなり速いです.これらの古いメソッドは、ノードごとの拡散を使用します、または、リフローと再描画を減らすために最適なDOM修正を計算するためにノード木の横断と比較を使用します.
Blockdomがそのような高性能を達成することができる主な方法は、ブロックによるブロック拡散を実行することによってです.ほとんどの木が静的であることを知っているとき、なぜノードの拡散によってノードを行うのでしょうか?我々は、ブロックのシリアル化されたバージョンを持って、我々は超簡単な文字列比較を行うことができますO(1) ツリー横断の代わりにO(n) .
古いメソッド:

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

新しい方法

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

さらに、要素を作成する方がずっと高速です.個別に要素を作成し、DOMノードツリーを構築する代わりに、ブロックのシリアル化された形式を使用して、cloneNode(true) DOMツリーをすばやく作成する方法.
以下に構文を示します:

// 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>

ご覧のように、Blockdomは最高のパフォーマンスを達成するためにいくつかのトレードオフを行います.The blockdom-child 構文は多少厄介ですが、ブロックツリーを作成するためには必要です.
あなたはread more about blockdom performance here

一般化ブロック
それで、どのように我々はBlockdomから学ぶことができて、既存の仮想DOM実装をよりよくすることができますか?私はこの概念を探求してきたMillion.js .

aidenybai / million
将来に仮想DOM!💥🦁✨






そば@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)

何百万?
ミリオンはライト級です<1kb ) コンパイラ拡張仮想DOMそれはfast !
現在の仮想DOM実装は、過度の複雑さから放棄された範囲まで不適切である.
100万人はこれを修正することを目的としており、プリコンパイルと静的解析に焦点を当てたJavaScriptライブラリのコアとして機能するライブラリagnostic仮想DOMを提供しています.
📚 Learn Million in 10 minutes! →
なぜ百万?

🦁 コンパイルするライブラリ用に構築

📦 軽量バンドルサイズ

⚡ 高速実行

🛠️ 使いやすいドライバ.

View on GitHub
ミリオン.JSは拡散の計算仕事を減らすためにコンパイラを使うつもりです、そして、ブロックはこれをするすばらしい方法です.ミリオン.JSはわずかな厄介な構文を、2つの主要な概念に焦点を当てcloneNode(true) .
この方法では、ブロックを構築し、それをレンダリングするたびにリコールする必要はありません.あなたはちょうどあなたが望むように構築し、それはあなたのために残りを処理します.
このように、それは多くのトレードオフのない超簡単な構文です.

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

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

あなたが読むことができますblocks in Million here .

結論
Blockdom仮想のDOMを最適化するエキサイティングな新しい方法を提示し、我々は将来的にレンダリングを最適化する方法のための実行可能な競争相手を作る.
他の仮想DOMライブラリはBlockdomからインスピレーションを得て、ブロック状の構造がハイパーパフォーマーレンダリングライブラリにおいて仮想DOMをコンテンダーにレンダリングするのを助ける方法に研究を実施しなければなりません.

ged-odoo / blockdom
高速仮想DOMライブラリ



ブロック
おそらく世界最速の仮想DOMライブラリblockdom は非常に高速な仮想DOMライブラリです.主な売り
ポイントは要素によってDOM要素を表現しませんが、代わりに
ブロック、ブロックがすべての静的な内容といくつかの特別な要素です
タグは、動的コンテンツを示す.これはBlockdomを使用することができますcloneNode(true)VDOMツリーがはるかに小さいので、ブロックの上で、diffプロセスをスピードアップします.
これは、ブロックをサポートし、フラグメントをサポートし、合成イベントハンドラを管理する
フレームワークではないことに注意してください.コンポーネントの概念もありませんblockdom は抽象化の下層レベルであることを意図している
他のフレームワークを追加することができます.チュートリアルのドキュメントを参照してください
トピック.
インストール方法
国立天文台
NPM Iブロック
糸はブロックを加える
CDN
https://unpkg.com/blockdom\/{ version }/dist/blockdom.IIFEMIT . JS
//最新の
View on GitHub