우리가 늘 사용하는 브라우저란 무엇이며, 화면의 렌더링 흐름에 대해 알아보도록 하자. 아마 개발자로서 대부분 UI를 그리는 것까지는 생각을 할 것이지만, 프론트에서 그린 UI를 브라우저가 어떤식으로 받아와서 생성하고 보여주는지 모르는 분들도 많을 것이다. 기본부터 짚고 넘어가보도록 하자.
1. 브라우저(Browser)
브라우저는 웹 페이지를 탐색하고 표시하는 소프트웨어이다. 사용자가 인터넷에 접속하여 검색하고, 콘텐츠를 보게 하는 등의 일을 도와주는 도구라고 볼 수 있다.
대표적인 브라우저로는 사파리, 구글 크롬, 파이어폭스, 엣지 등이 있다. 이런 브라우저는 HTML, CSS, JavaScript 같은 웹 기술을 해석해서 사용자에게 시각적으로 보여주는 역할을 하고 있다.
브라우저의 기능
앞서 말했듯이, 우리가 주소창에 https://example.com을 치면, 그 주소에 있는 HTML, CSS, JS 파일들을 서버에서 받아와서 눈에 보이는 웹페이지로 만들어주는 역할을 한다.
'선택한 자원을 서버에게 요청하고 전송받은 자원을 브라우저 화면에 표시한다.'
고 하는데 쉽게 설명하자면 사용자가 주소창에 url을 입력하여 접속하는 순간 브라우저는 해당 url에서 보여줄 정보를 가지고 있는 서버에 요청하고, 서버가 보내준 정보(자원)을 받아 화면에 뿌려주는 것으로 이해할 수 있다.
브라우저의 기본 구조
| 구성요소 | 설명 |
|---|---|
| 사용자 인터페이스 (UI) | 주소창, 북마크, 뒤로가기 버튼 등 사용자와 상호작용하는 부분 |
| 브라우저 엔진 | 사용자 인터페이스와 렌더링 엔진 사이를 연결하는 조정자 역할 |
| 자료 저장소 | 쿠키, 로컬스토리지, 세션스토리지, 캐시 등 클라이언트 측 데이터 저장 |
| 렌더링 엔진 | HTML, CSS를 파싱해서 화면에 페이지를 그리는 역할 담당 |
| 네트워크(통신) | 서버와 통신 담당 (HTTP 요청/응답 처리) |
| JS 엔진(JS 해석기) | JS파서, 컴파일러, 실행 엔진 등으로 구성되며 JS 코드를 실행 (예: V8, SpiderMonkey 등) |
브라우저의 렌더링 과정은 정확하게 말하자면 위 구조 중에서도 렌더링 엔진의 동작 과정이다.
2. 렌더링 파이프라인(Rendering Pipeline)
브라우저가 웹 페이지를 화면에 표시하는 과정의 전체 흐름을 렌더링 파이프라인이라고 한다. 간단하게 아래와 같다. (참고로 DOM은 Document Object Model, CSSOM은 CSS Object Model 이다.)
- HTML 수신 및 파싱 → DOM Tree 생성
- CSS 수신 및 파싱 → CSSOM Tree 생성
- DOM + CSSOM → Render Tree 생성
- Render Tree 기반으로 Layout 계산
- Layout 정보로 Painting 수행
- 화면에 최종 출력 (Composite 단계)
위 내용을 조금 더 자세히 풀어보면 아래와 같다.
1️⃣ HTML 파싱 → DOM 생성 (웹 상에 나타날 내용 구성)
- HTML은 페이지의 뼈대 (텍스트, div, h1 등)
- 네트워크 레이어를 통해 전달받은 HTML을 파싱하여 각 요소들을 DOM 트리의 각 노드로 전환, 이때 HTML 문서의 각 마크업과 DOM의 각 요소는 1:1 매칭됨
- DOM = Document Object Model → 웹페이지의 구조를 나무처럼 표현한 데이터
2️⃣ CSS 파싱 → CSSOM 생성 (시각적 요소, 스타일 지정)
- CSS는 디자인 정보 (색, 폰트, 배경 등)
- DOM 트리 구성후 CSS/Style 데이터를 파싱하여 CSSOM 트리를 만듦
3️⃣ DOM + CSSOM → 렌더 트리 생성
- 두 트리를 합쳐서 진짜 브라우저에 그릴 정보를 만듦 → 어떤 요소가 어디에 위치하고, 어떤 스타일을 갖는지를 계산
4️⃣ Layout
- 위치, 크기 등 레이아웃 계산 (버튼이 어디에, 이미지가 몇 px 위치에 등)
5️⃣ Painting
- 구성된 레이아웃을 바탕으로 UI 백엔드가 동작하여 각 노드들을 정해진 스타일 및 위치 값대로 화면에 배치함
- 진짜 화면에 그리는 단계(색, 글자, 이미지 등 눈에 보이는 요소들을 픽셀로 그림)
6️⃣ Composite
- 레이어 조합해서 최종 화면 표시
3. 추가 정보 !
❓ 렌더링 과정 이후 JS 실행
- JS는 렌더링 엔진과 별개로 JS 엔진(V8같은 ..)이 담당한다. 브라우저가 HTML을 읽다가
<script>태그를 발견하면 HTML 파싱을 멈추고 해당 스크립트를 JS엔진에 넘겨 실행하도록 한다. 그래서 DOM 조작할 때는 JS엔진과 렌더링 엔진과 긴밀히 연동되어 동작한다. - 기본적으로 HTML 파싱 중에 JS 파서가 동작하여 HTML 안에
<script>가 있으면 실행한다. - 이렇게 실행된 JS로 DOM을 조작할 수 있다. (ex. 버튼 클릭하면 텍스트 바꾸기 등)
- JS 실행은 HTML 파싱을 블록시키기 때문에 스크립트가 길거나 외부에서 스크립트 파일을 받아오는데 시간이 오래 걸리면 페이지 로딩이 길어질 수 있다.
❓ 렌더링 순서 주의
- JS는 렌더링 순서에 영향을 줄 수 있기 때문에 예를 들어
document.getElementById()가 DOM이 다 만들어지기 전에 실행되면 에러가 발생한다. - 그래서 보통 JS는 맨 아래쪽 (
</body>태그 바로 위)에 넣거나,DOMContentLoaded나window.onload이벤트로 실행시킨다. - 해당 이벤트 리스너들을 사용하면 브라우저가 HTML 문서를 모두 로드하고 DOM tree 렌더링을 끝낸 후에 자바스크립트를 실행(
DOMContentLoaded)하거나, DOM tree 렌더링 + 외부 리소스(이미지 등)까지 로드했을 때 자바스크립트를 실행(window.onload)할 수 있다. 일반적으로는 DOMContentLoaded가 더 빠르게 발생해서 선호되는 편이다.
