브라우저 동작 원리(쉽게 알아보기) - 렌더링 엔진/DOM/노드(node)(3)

이 글은 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한

"How Browsers Work: Behind the scenes of modern web browsers"를 인용하고 있습니다.

아무것도 모르는 초보자의 시선에서

하나하나 모르는 용어는 용어대로 찾아가면서

정리해보는 글입니다.

 

저와같이 아무것도 모르는 초보자를 기준으로 글을 작성했습니다.

 

부디 이 글에 마지막에는

글을 쓰고 있는 저도, 독자도 어렴풋이라도

브라우저가 어떻게 동작하는지 이해할 수 있었으면 좋겠습니다. 🙏

 

이 글은 브라우저 동작 원리 3편입니다.

다른 편은 아래 링크나 블로그에서 참조해주세요!

• 브라우저 동작 원리 1편
• 브라우저 동작 원리 2편

 

The rendering engine(렌더링 엔진)

---

전문

The responsibility of the rendering engine is well... Rendering, that is display of the requested contents on the browser screen.

By default the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.

렌더링 엔진은 콘텐츠에 대한 요청을 화면에 띄우는 역할을 합니다.

기본적으로 렌더링 엔진은 HTML과 XML 문서와 이미지를 화면에 띄울 수 있습니다.

만약 플러그인이나 브라우저 확장 기능을 사용한다면,

예를 들어, PDF 뷰어 플러그인을 사용한다면 PDF 문서를 화면에 띄울 수 있습니다.

 

하지만, 이 글에선 HTML과 CSS로 표시된 이미지에 중점을 둘 예정입니다.

 

 

Rendering engines(렌더링 엔진들)

---

전문

Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.

WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit.org for more details.

브라우저마다 사용하는 렌더링 엔진이 다릅니다.

인터넷 익스플로러의 경우 Trident를 사용하고,

파이어 폭스의 경우 Gecko를 사용하며,

사파리는 Webkit을 크롬과 오페라는 Webkit의 종류인 Blink를 사용합니다.

 

Webkit은 오픈 소스 렌더링 엔진으로

리눅스 플랫폼에서 사용되기 위해 만들어졌습니다.

 

애플은 Mac과 윈도우를 지원하기 위해 Webkit을 수정하였습니다.

 

 

 

The main flow(메인 흐름)

---

전문

The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.

After that, this is the basic flow of the rendering engine:

Figure : Rendering engine basic flow

The rendering engine will start parsing the HTML document and convert elements to DOM nodes in a tree called the "content tree". The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the render tree.

The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.

After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen. The next stage is painting–the render tree will be traversed and each node will be painted using the UI backend layer.

It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.

Main flow examples

Figure : WebKit main flow

Figure : Mozilla's Gecko rendering engine main flow (3.6)

From figures 3 and 4 you can see that although WebKit and Gecko use slightly different terminology, the flow is basically the same.

Gecko calls the tree of visually formatted elements a "Frame tree". Each element is a frame. WebKit uses the term "Render Tree" and it consists of "Render Objects". WebKit uses the term "layout" for the placing of elements, while Gecko calls it "Reflow". "Attachment" is WebKit's term for connecting DOM nodes and visual information to create the render tree. A minor non-semantic difference is that Gecko has an extra layer between the HTML and the DOM tree. It is called the "content sink" and is a factory for making DOM elements. We will talk about each part of the flow:

렌더링 엔진은 네트워크 계층에서 문서에 대한 요청을 받으며 작업을 시작합니다.

문서는 보통 8KB 단위로 전송됩니다.

 

이후, 렌더링 엔진의 흐름은 다음과 같습니다.

 

렌더링 엔진의 기본 흐름

렌더링 엔진은 HTML 문서에 대한 파싱을 시작합니다.

즉, 요청한 문서에 대해서 원하는 정보를 추출하고 가공하는 작업을 시작합니다.

이후 '콘텐츠 트리'라고 불리는 트리안에서 HTML 문서는 DOM 노드로 전환됩니다.

 

여기서 우리는 DOM이 무엇인지, 노드가 무엇인지, 트리가 무엇인지 이해해야 합니다.

 

 

DOM

---

DOM(Document Object Model)이라 하여 문서 객체 모델이라고도 표현합니다.

DOM은 HTML과 XML과 같은 문서에 접근하기 위한 일종의 인터페이스입니다.

DOM은 문서 내의 콘텐츠와 구조 등을 읽고 요소 들을 정의해,

각각의 요소에 접근하는 방법을 제공합니다.

 

쉽게 말해, HTML로 예를 든다면,

우리가 HTML로 작성한 문서는 태그로 이루어져 있고,

이러한 태그를 컴퓨터는 바로 이해하지 못합니다.

따라서, 컴퓨터는 HTML 태그를 하나의 객체로 보고

이에 따라 DOM을 구성합니다.

 

DOM 예시

DOM은 다음과 같은 특징을 갖습니다.

• DOM은 유효한 HTML 문서의 인터페이스이다.
• DOM은 유효하지 않은 HTML 코드를 교정한다.
• DOM은 자바스크립트에 의해 수정된다.

DOM은 자바스크립에 의해 수정된다는 특징을 이해하기 위해서는

Document Object, 즉 '문서 객체'가 생성되는 방식을 이해해야 합니다.

 

문서 객체는 두 가지 방식으로 생성됩니다.

1. HTML 태그가 적힌 문서를 읽어 문서 객체를 생성한다.(정적 과정)
2. 원래 존재하던 HTML 페이지에 자바스크립트를 이용해 문서 객체를 생성한다.(동적 과정)

HTML 태그로 작성된 문서를

자바스크립트를 이용해 수정하게 된다면

HTML 각 요소에 접근해야 되고

이때 각 요소를 DOM 요소라고 하며,

DOM 요소에 접근하여 문서를 수정하게 됩니다.

 

 

이러한 DOM의 종류는 다음과 같습니다.

• Core DOM : 모든 문서 타입을 위한 DOM
• HTML DOM : HTML 문서를 위한 DOM
• XML DOM : XML 문서를 위한 DOM

 

 

 

노드(Node)/트리(Tree)

---

그렇다면 노드란 무엇일까요?

컴퓨터 네트워크에서 노드는 네트워크에 연결된 1개의 기계를 의미합니다.

 

이러한 노드는 상황에 따라

다르게 정의될 수 있는데,

DOM 구조에서 노드는 하나의 점으로 볼 수 있습니다.

 

위의 DOM의 예시를 보면

Root Element를 포함한 각각의 element들이

노드라고 볼 수 있습니다.

 

DOM과 같은 구조는위쪽에서 시작하여 아래쪽으로 점점 퍼져나가는구조를 보여주는데,

 

이러한 구조의 그래프를'트리(Tree) 구조'라고 합니다.

 

트리 구조에서,

위쪽에 존재하는 노드는 부모(Parent) 노드,

그 아래에 존재하는 노드는 자식(Child) 노드라고 부릅니다.

 

위의 예시에서 Root Element인 <html>의 경우

가장 위에서 시작되는 노드로, 부모 노드가 없고 'root node'라 합니다.

또한 자식 노드가 없는 가장 말단의 노드를 'leaf node'라 합니다.

 

루트 노드를 제외한 모든 노드는 하나의 부모 노드만을 갖게 되고,

모든 요소 노드는 자식 노드를 가질 수 있습니다.

 

또한 부모 노드가 같은 요소 노도를 형제 노드(sibling node)라 부르며,

부모 노드를 포함해 현재 노드 상위에 존재하는 모든 노드를 조상 노드(ancestor node),

자식 노드를 포함해 현재 노드 하위에 존재하는 모든 노드를 자손 노드(descendant node)라 부릅니다.

 

 

---

오늘은 렌더링 엔진과, DOM, 노드에 대한 기본적인 개념을 알아봤습니다.다음 글에서는 렌더링 엔진의 동작 과정에서'렌더 트리 구축' 과정부터 다시 설명하도록 하겠습니다.

 

읽어주셔서 감사합니다.🙇‍♂️🙇‍♂️내용적 오류를 발견하신다면 댓글이나 메일 부탁드립니다!