[DOM & BOM] 렌더링(엔진)이란 무엇이고, 브라우저 렌더링은 어떻게 동작하는가?

[bucketHaneul]

푸항항

[shinsehantan]

렌더링이란, 요청한 콘텐츠를 화면에 표시하는 것입니다. 예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다. 각 브라우저는 이 렌더링을 수행하는 렌더링 엔진을 가지는데 사파리는 webkit 엔진을, 파이어폭스는 gecko 엔진을, 크롬은 블링크 엔진을 사용합니다. 브라우저 렌더링 동작 과정에 대해 말씀드리면, 브라우저는 읽어들인 문서를 파싱하여 웹 페이지에 어떤 내용을 최종적으로 렌더링할 지 결정합니다. 브라우저는 그 결정된 내용으로 렌더링을 수행하는데 그 과정에서 HTML 요소들의 구조화된 표현인 DOM과 그 요소들과 연관된 스타일 정보의 구조화된 표현인 CSSOM 모델 2가지로 '렌더트리'를 생성합니다. 브라우저 뷰포트에는 이 DOM과 CSSOM의 조합인 '렌더 트리'가 보여지는 것입니다. 위와 같은 일련의 과정들은 동기적으로 진행되지는 않습니다. 브라우저는 HTML을 파싱할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작하는데 자세한 동작 과정은 각 렌더링 엔진에 따라 약간씩 다르다고 합니다.

[bucketHaneul]

HTML, CSS, JS 등 개발자가 작성한 코드 파일을 브라우저에 출력하는 과정을 렌더링이라하고, 이러한 역할을 하는 엔진을 렌더링 엔진이라 합니다.

렌더링 엔진의 동작 과정은 다음과 같습니다.

가장 먼저, 요청에 대한 응답으로 받은 HTML문서를 파싱하여 DOM 객체를 생성해 나갑니다. 그렇게 HTML 문서를 파싱하다가, link 태그를 만나면 CSS파일과 style 요소를 파싱하여 CSSOM을 생성하는데요. 렌더링 엔진은 이렇게 생성된 DOM 객체와 CSSOM 객체를 합쳐서 render tree를 생성합니다. 그리고나서 render tree를 통해 각 노드를 화면에 표시하도록 배치합니다. 배치가 완성되면, UI 백엔드에서 render tree의 각 노드를 가로지르며 화면에 그리게 되고, 우리는 그렇게 브라우저에서 우리가 원하는 화면을 볼 수 있게됩니다. 추가로 Githubissues.

Githubissues is a development platform for aggregating issues.