웹 브라우저 - Render 절차

웹 브라우저는 웹 페이지를 사용자에게 표시하기 위해 HTML, CSS, JavaScript 파일을 처리하고 렌더링한다.

이번 글에선 렌더링 절차와 관련된 주요 개념을 포스팅 해 볼 예정이다.. 🥹

 

1. 웹 페이지 구성 요소 

웹 페이지는 기본적으로 HTML, CSS, Javascript 세 가지 요소로 구성되어있다. 웹브라우저는 이 요소들을 로드하고 실행하여 최종적으로 사용자에게 완성된 웹 페이지를 보여준다.

• HTML: 페이지 구조를 정의하는 마크업 언어
• CSS: 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어
• Javascript: 페이지에 동적인 기능과 인터랙션을 추가하는 스크립트 언어

2. 캐시와 성능 최적화

웹 브라우저는 성능을 최적하기 위해 네트워크 사용을 최소화하는 다양한 방법을 사용한다. 그 중 하나가 캐시(Cache).

캐시는 브라우저가 이전에 받은 응답을 저장하여 재사용함으로써 네트워크 트래픽을 줄이고 페이지 로딩 속도를 향상 시킨다.

 

3. DOM (Document Object Model) =HTML문서를 조작하는 API → HTML 조작 API

DOM은 객체로 구성되어 있으며 필드와 메소드를 통해 조작한다.

• 필드: 예를 들어, document.getElementsByTagName("p")[0]는 첫 번째 <p> 요소를 선택
• 메소드: 예를 들어, element.innerText는 요소의 텍스트 내용을 조작.

4. HTML과 DOM, CSS와 CSSOM

• HTML ≈ DOM: HTML은 단지 텍스트 파일이지만, DOM은 HTML을 프로그래밍적으로 조작할 수 있는 API로 제공된다.
• CSS ≈ CSSOM: CSS 역시 단지 텍스트 파일이지만, CSSOM(CSS Object Model)은 CSS를 프로그래밍적으로 조작할 수 있는 API로 제공된다.

5. Render Tree 생성

웹 브라우저는 HTML(DOM)과 CSS(CSDOM)를 합쳐서 Render Tree를 생성한다.

Render Tree는 실제로 화면에 표시될 내용을 포함하며, 이 과정이 완료되면 웹페이지에 사용자에게 표시된다.

 

6. Layout(Reflow) 및 Paint(Repaint)

Render Tree가 생성된 후, 브라우저는 페이지의 레이아웃을 계산한다. 이 과정을 Layout 또는 Reflow라고 부르며 이후 페이지의 시각적 요소들이 화면에 그려진다. 이 과정을 Paint 또는 Repaint라고 한다.

 

Repaint

Repaint: 페이지의 일부 또는 전체를 다시 그리는 과정으로, CSS 스타일이나 레이아웃, 요소의 외관이 변경될 때 발생합니다.

Time to Interactive (TTI)

Time to Interactive (TTI): HTML과 CSS가 로드된 후, JavaScript를 통해 마우스 이벤트 등의 인터랙션이 적용된 시점을 의미합니다.

 

 

 

+@ React와 Virtual DOM

React와 같은 프레임워크는 성능 최적화를 위해 가상 DOM(Virtual DOM)을 사용한다. 가상 DOM은 실제 DOM 조작을 최소화하여 불필요한 Repaint를 줄인다.

 

---

 

ℹ️참고

[ASAC 6기 강의자료]