가상 돔이란 무엇입니까? 그리고 왜 더 빠릅니까?

React 문서에 따르면 가상 DOM은

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM

가상 DOM에 대해 알아보기 전에 DOM에 대한 간략한 소개

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web

따라서 기본적으로 DOM은 XML 및 HTML과 같은 문서를 트리 구조로 표현한 것입니다. DOM을 사용하여 해당 문서의 요소를 추가, 제거 또는 업데이트할 수 있습니다.

가상 DOM이란 무엇입니까?

가상 DOM은 DOM의 표현입니다. 실제 dom의 생성은 브라우저에서 처리됩니다. react, vue 등과 같은 최신 프레임워크는 가상 DOM이라고 하는 메모리에 실제 DOM과 유사한 요소 트리를 생성합니다.

예를 들어:

<ul class="fruits">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

위의 코드는 가상 DOM에서 아래와 같이 표현할 수 있습니다.

// Virtual DOM representation
{
  type: "ul",
  props: {
    "class": "fruits"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "Apple"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Orange"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Banana"
      ]
    }
  ]
}

왜 가상 DOM이 필요한가요?

SPA가 그다지 인기가 없었던 초기에는 렌더링이 서버 측에서 수행되었습니다. 따라서 모든 사용자 상호 작용/요청에 대해 서버는 렌더링할 새 페이지를 보냅니다.

SPA의 경우 문서가 하나만 있고 동일한 문서에서 모든 DOM 조작이 수행됩니다. 따라서 복잡한 프로젝트의 경우 최적화되지 않은 DOM 작업이 많이 사용될 수 있습니다.

예를 들어: 배열에서 목록을 렌더링하려고 한다고 가정해 보겠습니다. 우리는 아래와 같이 할 수 있습니다.

function generateList(fruits) {
    let ul = document.createElement('ul');
    document.getElementByClassName('.fruits').appendChild(ul);

    fruits.forEach(function (item) {
        let li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += item;
    });

    return ul
}

let fruits = ['Apple', 'Orange', 'Banana']
document.getElementById('#list').innerHtml = generateList(fruits)

이제 목록이 변경되면 위의 메서드를 다시 호출하여 목록을 생성할 수 있습니다.

fruits = ['Pineapple', 'Orange', 'Banana']
document.getElementById('#list').innerHtml = generateList(fruits)

위의 코드에서는 새 목록이 생성되어 문서에 설정됩니다. 이 접근 방식의 문제는 단일 과일의 텍스트만 변경되지만 새 목록이 생성되어 DOM으로 업데이트된다는 것입니다. 이 작업은 DOM에서 느립니다. 최적화되지 않은 코드를 아래와 같이 변경할 수 있습니다. 이렇게 하면 DOM의 작업 수가 줄어듭니다.

document.querySelector('li').innerText = fruits[0]

최적화되지 않은 코드와 최적화된 코드의 최종 결과는 동일하지만 최적화되지 않은 DOM 작업의 비용은 성능입니다. 목록의 크기가 크면 차이를 볼 수 있습니다. 이것은 백본 js와 같은 이전 프레임워크에서 발생했던 문제였습니다.

그래서 우리의 큰 질문에 대한 대답입니다. 왜 가상 DOM이 필요한가요? 위의 문제를 해결하는 것입니다.

react와 같은 최신 프레임워크는 state/props에서 무언가가 변경될 때마다 새로운 가상 DOM 표현이 생성되고 이전 표현과 비교됩니다. 이 예에서 유일한 변경 사항은 "Apple"에서 "Pineapple"입니다. 전체 목록을 바꾸는 대신 텍스트만 변경되기 때문에 반응은 다음 코드로 DOM을 업데이트합니다.

document.querySelector('li').innerText = "Pineapple"

가상 DOM이 실제 DOM보다 얼마나 빠릅니까?

아니요, 가상 DOM은 실제 DOM보다 빠르지 않습니다. 내부적으로 가상 DOM은 실제 DOM을 사용하여 페이지나 콘텐츠를 렌더링합니다. 따라서 가상 DOM이 실제 DOM보다 빠를 수는 없습니다.

그렇다면 왜 모두가 가상 DOM이 더 빠르다고 말하는가? 가상 DOM이 더 빠르다는 것은 아닙니다. 가상 DOM을 사용하여 변경된 사항을 확인할 수 있으며, 이를 통해 전체 DOM을 교체하는 대신 해당 변경 사항만 실제 DOM에 적용할 수 있습니다.

가상 DOM이 비용이 많이 드는 DOM 작업을 줄이는 유일한 방법입니까?

반드시 그런 것은 아니지만 ember js, angular 및 svelte와 같은 다른 프레임워크는 동일한 문제를 해결하기 위해 다른 접근 방식을 사용합니다.

결론

가상 DOM은 실제 DOM을 나타냅니다. 상태가 변경될 때마다 새로운 가상 DOM이 생성되고 이전 가상 DOM과 비교됩니다. 그런 다음 이러한 특정 변경 사항에 대해 DOM 작업이 적용됩니다. 가상 DOM의 비용은 다른 가상 DOM과의 차이를 계산하는 것입니다. 구성 요소가 많은 대규모 프로젝트의 경우 diff 계산에 시간이 걸립니다. 처리 방법에 대해 자세히 알아볼 수 있습니다. here .