[네트워크] 🌐 브라우저의 렌더링 원리를 이해할 수 있도록 설명해보자

이전에 학습한 웹 브라우저의 동작 원리 중 브라우저가 렌더링하는 원리에 대해서 학습해봅시다.

 

📌 웹 브라우저의 구조

* Data Storage(Data Persistence) := 보조 기억장치에 데이터를 저장하는 파트

쿠키나 로컬 스토리지, 세션 스토리지, indexedDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는데 사용

 

 

 

 

 

📌 브라우저별 렌더링 엔진 종류

Chrome	BLINK
Safari	WEBKIT
Firefox	GECKO

이전에 Chrome은 WEBKIT을 사용했지만 2013년 WEBKIT에서 파생된 BLINK를 사용 중입니다.

 

대중화된 크롬의 렌더링 원리를 중점적으로 알아보겠습니다.

 

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만 합니다.

각 탭은 독립된 프로세스로 처리합니다.

 

 

 

📌 렌더링 엔진 목표

HTML과 CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 합니다.

HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드합니다.

DOM 및 CSSOM을 결합하여 렌더 트리를 형성합니다.

렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.

개별 노드를 화면에 페인트합니다.

 

 

 

 

📌 렌더링 엔진의 동작 과정

• 파싱(Parsing)
• 렌더 트리(Render Tree) 구축
• 레이아웃(Layout) 또는 리플로우(Reflow)
• 페인트(Paint)

 

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것입니다.

파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부릅니다.

HTML 파서는 HTML 마크업을 파싱 트리로 변환합니다.

 

 

 

👉 DOM 트리와 CSSOM 트리 생성

문서를 받아 파싱 후 태그로 의미를 가지는 토큰화합니다.

렉싱되어 노드 객체화됩니다.

 

DOM 트리

HTML태그 아래의 노드들이 연관 관계를 가짐

• 최상위 docment 객체
• 태그는 엘리먼트 노드
• 태그의 요소는 어트리뷰트 노드
• 텍스트는 텍스트 노드
• 주석은 코멘트 노드

 

 

 

CSSOM 트리

CSS로는 돔의 화면 표시를 담당하는 cssom 트리가 만들어짐

• body 태그에 text-align을 주면 자식 요소에 동일한 속성이 적용됩니다.

 

 

 

👉 render tree 생성

렌더링 엔진이 이 둘을 합쳐서 render tree를 만듭니다.

 

 

 

 

👉 render tree 배치

레이아웃(reflow) 과정

• 뷰포트 내에 요소들의 위치와 크기를 계산
• css의 %나 em과 같은 상대적 속성이 뷰포트에 맞춰 픽셀로 계산

 

 

 

👉 페인트 과정

요소들을 파악한 후 실제로 화면에 그려지도록 하는 과정

크리티컬 렌더링 패스의 동작 시간을 줄이면 브라우저의 웹 페이지 표시 시간을 줄일 수 있음

 

ui 업데이트 상황 (js로 css가 변경된다면)

1. 요소의 크기나 위치가 바뀔 때, 브라우저 창의 크기가 바뀌었을 때 -> 레이아웃이 다시 동작
2. 이미지나 텍스트 색과 같이 레이아웃의 수치에 영향을 주지 않는 변경이 일어났을 때 -> paint 다시 동작
3. 레이어의 합성만 발생하는 경우

 

 

 

➕ 애니메이션 랜더링 최적화

position 속성을 사용해서 움직이는 애니메이션을 표시할 수 있지만 layout 과정부터 동작하므로 성능상 문제가 있습니다.

transform 속성을 사용하면 레이어의 합성만 일어나기 때문에 렌더링 최적화를 할 수 있습니다.

 

 css 속성별 ui 업데이트 상황 참고 사이트

CSS Triggers List - What Kind of Changes You Can Make

 

 

 

---

How browsers work