Blockdom 탐색: 가장 빠른 가상 DOM(유사 이래!)

JavaScript UI 라이브러리 개발 분야에서 일한 적이 있다면, 들어보셨을 수도 있습니다. blockdom 현재 존재하는 속도가 가장 빠른 가상 DOM일 수도 있습니다.
Ryan Carniato가 고성능 가상 DOM의 한 예로 칭찬할 정도로 Solid와 견줄 만하다.js의 표현:


리안 카니아토
@ 리안 카니아토

누가 가상 DOM이 느리다고 알려줬어요?블록덤을 봐라. VDOM 라이브러리인데, 심지어는 자신의 돈에 기회를 제공한다.github.com/ged-odoo/block… 공식 JS 프레임워크 결과:
2021년 9월 8일 오후 21:48

블락덤이 진짜 빨라요.
다른 가상 DOMsnabbdom, virtual-dom에 비해 훨씬 빠르다.이러한 비교적 오래된 방법은 노드별로 확산하거나 노드 트리를 옮겨다니며 가장 좋은 DOM 수정을 계산해서 회류와 다시 그리기를 줄인다.
Blockdom이 이렇게 높은 성능을 실현하는 주요한 방법은 블록마다 확산하는 것이다.대부분의 나무가 정적이라는 것을 알았을 때, 왜 점차적으로 퍼져야 합니까?우리는 트리가 아닌 아주 간단한 문자열 비교O(1)를 할 수 있는 서열화된 버전의 블록을 가지고 있다.
기존 방법:

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

새로운 방법

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

그 밖에 원소를 만드는 속도가 훨씬 빠르다.블록의 서열화 형식을 사용하여 O(n) 방법으로 DOM 트리를 신속하게 만들 수 있습니다. 단독으로 원소를 만들고 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은 최상의 성능을 얻기 위해 몇 가지 균형을 잡았습니다.cloneNode(true) 문법은 좀 서투르지만 블록 트리를 만드는 데 필수적이다.
당신은 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)

무엇이 백만입니까?
백만 원은 경량급 blockdom-child 컴파일러가 강화한 가상 DOM이다.네fast!
현재의 가상 DOM 실현은 너무 복잡할 때부터 포기될 때까지 부족하다. 대부분은 사용할 수 없을 뿐만 아니라 원시 성능과 크기를 희생하지 않는다.
Million은 이 문제를 해결하기 위해 라이브러리와 무관한 가상 DOM을 제공하여 사전 컴파일링과 정적 분석에 전념하는 자바스크립트 라이브러리의 핵심으로 한다.
📚 Learn Million in 10 minutes! →
왜 백만 원이야?

🦁 컴파일하기

📦 무게가 가벼운 빔 사이즈(<1kb brotli+min)

⚡ 빠른 실행

🛠️ 드라이버를 사용한 콤보...

View on GitHub
백만js는 컴파일러를 사용하여 확산된 계산 작업을 줄일 계획이다. 블록은 좋은 방법이다.백만js는 약간 서투른 문법을 포기하고 두 가지 주요 개념인 문자열 비교 능력과<1kb에 전념했다.
이렇게 하면 구성 블록을 렌더링할 때마다 호출할 필요가 없습니다.네가 원하는 대로 구축하기만 하면, 그것은 너를 위해 남은 일을 처리할 것이다.
이렇게 해서 그의 문법은 매우 간단하고 절충이 많지 않다.

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

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

읽을 수 있다blocks in Million here.

결론
Blockdom은 흥미로운 가상 DOM을 최적화하는 새로운 방법을 제공하여 미래에 렌더링 방식을 최적화하는 실행 가능한 경쟁자가 되도록 했다.
다른 가상 DOM 라이브러리는 블록덤에서 영감을 얻어 유사한 블록의 구조가 가상 DOM 렌더링이 고성능 렌더링 라이브러리의 경쟁자가 되는 것을 어떻게 돕는지 연구해야 한다.

ged-odoo / blockdom
빠른 가상dom 라이브러리



구역
아마도 세계에서 가장 빠른 가상dom 라이브러리일 것이다cloneNode(true)는 매우 빠른 가상dom 라이브러리이다.주요 장점
DOM을 요소별로 표현하는 것이 아니라 블록별로 표현하는 것이 중요합니다.
블록, 블록은 모든 정적 내용과 특수한 요소를 포함하는 요소
동적 내용을 표시하기 위해 표시합니다.Blockdom 사용 허용blockdomvdom 트리가 훨씬 작기 때문에 블록에 차이 처리를 생성하고 가속화할 수 있습니다.
블록, 지원 세션, 합성 이벤트 처리 프로그램 관리 등의 기능을 갖추고 있다
프레임이 아니므로 주의하십시오.그것은 심지어 구성 요소의 개념조차 없다cloneNode(true)는 낮은 수준의 추상층으로
다른 프레임도 추가할 수 있습니다.이 문제에 대한 강좌를 얻기 위해 관련 문서를 참고하십시오
화제 1
설치 방법
NPM
npm i 블록
사선에 덩어리를 첨가하다
CDN
https://unpkg.com/blockdom@{VERSION}/dist/blockdom.살다min.js
//최신...
View on GitHub