브라우저에서의 렌더링 이해: DOM

우리가 사용하는 도구를 아는 것은 경력을 발전시키는 데 중요한 단계입니다. 전류가 어떻게 작동하는지 이해하지 못하는 전기 기술자를 상상해 본 적이 있습니까? 그리고 브라우저의 작동 방식을 이해하지 못하는 프런트엔드 개발자에 대해 생각해 본 적이 있습니까? 음, 이것은 매우 흔한 일입니다. 페이지를 구성하기 위해 브라우저가 따르는 프로세스를 이해하는 프런트엔드 개발자는 거의 없습니다. 그리고 간단한 과정임에도 불구하고 매우 중요하고 안타깝게도 간과되고 있습니다.

오늘은 HTML 태그를 생성하거나, JavaScript로 조작하거나, CSS로 색상을 변경할 때마다 브라우저에서 수행되는 프로세스를 이해하는 여정을 시작하겠습니다.

렌더링이란 무엇입니까?

집을 지을 때 우리는 여러 단계를 거칩니다. 먼저 기초를 다지고, 벽을 쌓고, 지붕을 추가하고, 마감(석고, 바닥재 등)을 하고, 마지막으로 가구와 가전제품을 추가합니다. 웹사이트 구축은 비슷한 과정을 따릅니다. 먼저 기초(HTML)를 만든 다음 마무리(CSS)를 추가하고 마지막으로 상호 작용(JavaScript)을 추가합니다. 즉, 렌더링은 브라우저가 코드를 사용자를 위한 시각적이고 대화형으로 변환하는 프로세스입니다.

렌더링 프로세스

웹페이지 렌더링은 복잡한 프로세스이므로 브라우저는 이 렌더링을 DOM 및 CSSOM 구축, 페인팅, 다시 페인팅, 흐름 및 리플로우와 같은 작은 활동으로 나눕니다.

많은 개념이 있지만 오늘은 DOM에 대해 집중적으로 공부하겠습니다.

해

DOM(Document Object Model)은 HTML 문서를 계층적으로 표현하기 위해 사용되는 데이터 구조 형태의 표현입니다. 계층적이라는 단어가 중요한 이유는 DOM이 트리처럼 보이기 때문입니다. 여기서 각 요소는 자식을 가질 수 있는 노드입니다. 아래 이미지와 똑같습니다:

코드에서 이 표현은 다음과 같습니다.

브라우저는 W3C DOM 및 WHATWG DOM 표준에 따라 이 표현을 화면에 렌더링해야 하는 요소와 따라야 하는 계층 구조를 식별하는 지침으로 사용합니다.

DOM 구조

DOM은 문서, 노드, 요소, 속성, 텍스트 등 여러 개체로 구성됩니다.

• 문서(document): 이것은 우리 트리의 루트인
• 노드: 트리의 각 부분은 노드입니다. 문서는 노드이고 요소는 노드이며 해당 요소의 하위 요소도 노드입니다.
• Element(element): 요소 유형 노드는 태그를 나타냅니다.

  유형 요소의 노드입니다.

• 속성: 이 개체는 각 요소의 속성을 나타냅니다. 클래스는 div 태그
  의 속성입니다.
• 텍스트(text): 일반적으로 트리의 마지막 수준입니다. 화면에 표시될 텍스트입니다.

DOM을 구성하는 모든 개체는 모든 최신 브라우저에서 사용할 수 있는 DOM API를 통해 자바스크립트를 사용하여 조작할 수 있습니다.

DOM 조작

React, Vue 또는 Angular와 같은 도구를 사용하는 현대 개발에서는 DOM을 직접 조작할 필요성이 점차 줄어들고 있습니다.

각 DOM 업데이트는 성능 측면에서 비용이 많이 드는 프로세스이기 때문입니다. React와 같은 기술은 이러한 작업을 최적화하기 위해 정확하게 만들어졌으며 성능 저하 없이 인터페이스를 효율적으로 조작할 수 있습니다. 그러나 직접적인 DOM 조작이 여전히 필요한 특정 시나리오가 있으며, 그 때가 오면 대비하는 것이 중요합니다.

처음으로 DOM 요소에 액세스하고 조작하려면 브라우저 콘솔을 열고 다음 코드를 실행하세요.

1. 첫 번째 줄에서 구조화된 ID가 있는 요소를 찾습니다. 내 블로그의 각 섹션에는 ID라는 제목이 있습니다.

2. 두 번째 줄에서는 요소의 textContent 속성을 변경합니다.

이 발췌문은 설명을 위한 것이므로 단순합니다. 인터넷에서 발견되는 대부분의 반복은 DOM에 대한 변경 및 업데이트를 통해 발생합니다.

이미 익숙한 웹사이트에 접속하여 발생하는 반복을 분석하고 가능하다면 이를 복제해 보는 것이 좋습니다. 이것은 유창함을 향상시키는 훌륭한 연습입니다
DOM 조작.

결론

DOM은 렌더링 프로세스를 위해 브라우저에서 사용하는 트리 모양 표현입니다.

이 트리의 요소에 액세스하고 자바스크립트를 사용하여 자유롭게 조작할 수 있습니다. 이러한 유형의 작업을 수행하는 방법을 아는 것은 React, Angle 및 Vue와 같은 프레임워크와 라이브러리를 이해하는 데 필수적입니다.

기본 지식이 가장 중요하지만, 늘 무시되고 있습니다.
웹 개발의 맥락에서는 HTML, CSS, JavaScript 및 브라우저 작동 방식을 아는 것이 필수적입니다. 이러한 탄탄한 기초를 바탕으로 이러한 기본에서 파생되는 모든 기술을 배울 수 있습니다.

매우 감사합니다!!

여기까지 와주셔서 감사합니다!

이 책을 읽으면서 새로운 것을 배우셨기를 바랍니다.

다음에 또 만나요!

참고자료

MDN - DOM이란 무엇입니까

Alura - DOM이란 무엇입니까

Hostinger - DOM이란 무엇입니까

위 내용은 브라우저에서의 렌더링 이해: DOM의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!