Block dom

출처 : https://ktseo41.github.io/blog/log/virtual-dom-back-in-block.html

요약

이 글은 React와 Million.js의 내부 동작 원리와 가상 DOM에 대한 분석을 제공하며, 가상 DOM의 성능 문제와 블록 가상 DOM의 접근 방식에 대해 다룹니다.

사실

• 🌳 “가상 DOM은 빠르다”는 말은 가상 DOM이 실제 DOM보다 빠르다는 의미로 흔히 사용되며 밈(meme)으로 유명합니다.
• 🏛️ 리치 해리스는 “가상 DOM은 순수한 오버헤드”라 주장하여, 가상 DOM이 효율적이지 않다는 견해를 제시했습니다.
• 🔄 가상 DOM은 React와 같은 프레임워크에서 사용되며, 컴포넌트 변경 시 변경된 부분을 계산하여 실제 DOM을 업데이트합니다.
• 💡 스벨트와 SolidJS는 더티 체킹과 같은 다른 접근 방식을 사용하여 가상 DOM을 우회합니다.
• 🧱 2022년에는 블록 가상 DOM 개념을 도입한 Blockdom이 출시되었습니다.
• 🕵️‍♂️ 블록 가상 DOM은 정적 분석과 더티 체킹을 통해 데이터의 변화를 추적하고 DOM을 업데이트하는 접근 방식을 사용합니다.
• 🔍 블록 가상 DOM은 정적 콘텐츠가 많은 경우에 특히 효과적이며, 동적 콘텐츠가 많은 경우에는 성능 차이가 줄어들 수 있습니다.

노트

• blockdom :
  • 두 메커니즘
    • 정적 분석 : 가상 DOM을 분석해 트리의 동적 부분을 Edit Map으로 추출하거나, 가상 DOM의 동적 부분을 edits(매핑) 목록으로 추출함
    • 더티 체킹 : 상태(가상 DOM 트리가 아님)의 차이를 계산해 변경을 확인함. 상태가 변경된 경우 Edit Map을 통해 DOM을 직접 업데이트함
      • DOM이 아닌 데이터의 차이를 계산함. 데이터의 크기는 일반적으로 DOM의 크기보다 훨씬 작음.
  • 최초 렌더링 시에 동적으로 변경할 부분을 찾아내고, 이후 변경 시 더티 체킹을 통해 업데이트할 DOM을 찾아냄
  • 가상 DOM의 정적인 부분을 건너뛰고 동적인 부분만 비교하기에 빠름. 따라서 동적 콘텐츠가 많으면 일반 가상 DOM과 큰 차이가 없을 수 있다. (데이터의 차이를 비교하는게 가상 DOM 차이를 비교하는 것보다 무거운 경우도 존재)

    1 2 3 4

    // 5개의 데이터 값 차이 function Component({ a, b, c, d, e }) { // 1개의 가상 DOM 차이 return <div>{a + b + c + d + e}</div>; }

#review