🖇️ 참조
브라우저 렌더링 이해하기 - 렌더링 최적화
웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN
[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항)
🏗️ 브라우저의 기본 구조
User Interface
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
Browser Engine
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
Rendering Engine
요청한 콘텐츠를 표시한다. 예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 보여준다.
Networking
HTTP 요청과 같은 네트워크 호출에 사용된다. 플랫폼 독립적인 인터페이스이며 각 플랫폼 하부에서 실행된다.
UI Backend
콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명서하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
JavaScript Interpreter
JS code를 해석하고 실행한다.
Data Persistence(Storage)
자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 리소스를 하드 디스크에 저장할 필요가 있다.
🏳️ 렌더링 동작 과정
🧑🏻🏫용어정리
- 렌더링 엔진
- 렌더링 엔진은 웹 페이지를 불러올 때 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱한다. 이때, HTML은 문서 구조를 정의하고, CSS는 문서의 스타일을 정의하며, JavaScript는 문서의 동작을 정의한다.
- 렌더 트리
- 렌더 트리는 렌더링 엔진이 파싱한 HTML, CSS와 같은 웹 페이지의 요소들을 이용하여 구성한 트리 구조다. 이 구조는 브라우저가 화면에 표시할 요소들을 정의한다.
- 레이아웃
- 레이아웃은 렌더 트리를 이용하여 브라우저의 화면에 요소들을 배치하는 과정이다. 이때, 각 요소의 크기, 위치, 간격 등을 계산한다.
- 페인팅
- 페인팅은 레이아웃을 이용하여 계산된 위치에 요소들을 표시하는 과정이다. 이때, 브라우저는 렌더링 엔진에서 계산된 정보를 이용하여 브라우저 화면에 그래픽 요소들을 표시한다.
HTML 파싱
브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이 과정에서 브라우저는 HTML 태그의 종류와 속성을 분석하고, 각 태그의 위치를 계산한다.
CSS 파싱
브라우저는 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. 이 과정에서 브라우저는 CSS 선택자와 규칙을 분석하고, 각 규칙의 적용 범위와 우선 순위를 계산한다.
렌더 트리 생성
브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 이 과정에서 브라우저는 레이아웃과 페인팅에 필요한 정보를 추출하고, 숨겨진 요소나 비표시 요소를 필터링한다.
레이아웃
브라우저는 렌더 트리의 각 요소의 위치와 크기를 계산하여 뷰포트 내에서의 정확한 배치를 수행한다. 이 과정에서 브라우저는 브라우저 창의 크기나 스크롤 위치 등의 요소도 고려한다.
페인팅
브라우저는 렌더링된 요소들을 화면에 그린다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함된다.
