Virtual DOM을 선택해야 하는 이유: 렌더링 및 성능-JS 튜토리얼-php.cn

Virtual DOM을 선택해야 하는 이유: 렌더링 및 성능

Linda Hamilton

풀어 주다： 2024-11-03 14:11:30

원래의

712명이 탐색했습니다.

이 글에서는 돔에 대해 자세히 알아보고, 가상돔이 무엇인지 알아보겠습니다.

DOM(Document Object Model)이란 무엇입니까?

웹페이지가 브라우저에 로드되면 브라우저는 HTML을 생성하여 요청된 페이지를 에 표시합니다. 이 html 구조는 트리와 같습니다. DOM은 웹 문서(HTML 또는 XML)의 내용을 브라우저에서 객체지향 구조로 변환한 결과로 구성됩니다. 이러한 구조 덕분에 페이지 내용은 브라우저에서 트리 구조로 구성되며, 각 HTML 태그나 콘텐츠는 "노드".

이제 문서 개체 모델을 살펴보세요 :

문서 객체에 접근하는 예제 코드를 작성해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

로그인 후 복사

console.log(document)

로그인 후 복사

출력 :

Why Virtual DOM: Render and Performance

console.log(document)를 통해 DOM에 접근할 수 있습니다. 문서 개체를 살펴보면 이 개체가 HTML 문서를 나타낸다는 것을 알 수 있습니다. 즉, 문서 개체에는 HTML 문서.

의 모든 태그가 포함되어 있습니다.

Javascript를 사용하면 문서 개체 내부의 태그에 액세스하고 문서 개체 내부의 태그를 조작하여 동적 웹 페이지를 만들 수 있습니다. 액세스 방법에 대한 예를 들어보겠습니다.

const wrapper = document.getElementById("card")

console.log(wrapper)

로그인 후 복사

출력:

Why Virtual DOM: Render and Performance

가상 DOM이란 무엇입니까?

Why Virtual DOM: Render and Performance

이제 우리는 DOM을 변경("HTML 변경")하는 가장 쉬운 방법이 요소의 innerHTML 속성을 변경하는 것임을 알고 있습니다. html을 수정하는 이 방법은 DOM 다시 그리기(" 사용자가 보는 내용 업데이트 ")에서 성능이 좋지 않습니다. 이는 innerHTML 때문입니다. 문자열에서 DOM 노드를 구문 분석하고, 전처리하고, 추가해야 합니다. 웹페이지에 HTML 변형이 너무 많으면 성능 문제가 발생합니다.

그럼 성능 문제는 어떻게 해결됐나요?

이 문제는 가상 DOM을 생성하여 해결되었습니다. 가상 DOM은 메모리에 저장된 실제 DOM의 복사본입니다. 사용자가 웹페이지와 상호작용하고 웹페이지의 상태가 업데이트되면 메모리에 새로운 가상 DOM이 생성됩니다. 이 새로운 가상 DOM은 이전의 가상 DOM과 비교하여 변경 사항을 파악하고 이러한 변경 사항을 실제 DOM에 적용하여 사용자에게 보여줍니다.

이것은 여러분이 사용하는 최신 라이브러리의 작동 논리이며 비교를 위해 dif 알고리즘을 사용합니다. 그들은 모두 가상 DOM을 사용합니다. 하지만 가상 DOM 접근 방식은 빠르지만 성능을 위해 고려해야 할 점이 있습니다. 가상 도메인을 변경하면 전체 웹 페이지가 렌더링됩니다. 라이브러리에는 성능 최적화를 위한 후크

가 있습니다.