브라우저의 렌더링 원리

브라우저란? 인터넷을 탐색할 수 있는 소프트웨어 어플리케이션

웹 페이지를 불러오고 표시하며, 사용자와 인터넷 간의 인터페이스 역할을 한다

ex. 구글 크롬, 애플 사파리, 마이크로소프트 엣지

 

렌더링이란?  웹 페이지의 코드(HTML, CSS, JavaScript 등)를 해석하여 사용자가 볼 수 있는 그래픽과 텍스트 형태로 변환하는 과정

서버에서 받은 데이터를 화면에 적절히 배치하고 표현하여 사용자가 웹 페이지를 볼 수 있게 만든다

 

렌더링 과정

1. 파싱(Parsing):
   • 브라우저는 HTML, CSS, JavaScript 파일을 다운로드하고 이를 파싱하여 DOM(문서 객체 모델)과 CSSOM(스타일 시트 객체 모델)을 생성한다
   • 파싱이란? 컴퓨터 프로그램이나 브라우저가 입력된 데이터를 구조화된 형식으로 해석하는 과정
     웹 개발에서 HTML, CSS, JavaScript 파일을 처리할 때, 브라우저는 이 파일들을 읽고 이해한 후, 이를 기반으로 웹 페이지를 구성하는데, 이 해석 과정을 파싱이라고 한다
   • 파싱의 결과가 DOM 트리와 CSSOM 트리
   • DOM 트리란? 각 HTML 요소들을 객체로 변환한 후 이 객체들을 계층적으로 배치하여 문서 구조를 표현한 모델
   • CSSOM 트리란? 각 HTML 요소에 적용될 스타일을 설명하는 객체 모델
   • JavaScript 파싱이란?  스크립트를 읽고 실행 가능한 코드로 변환하는 과정
     • 브라우저는 JavaScript 코드를 읽고, 이를 해석하여 실행 가능한 형태로 변환한다
     • JavaScript는 DOM이나 CSSOM에 접근해 동적으로 HTML 구조나 스타일을 변경하거나 사용자 인터랙션에 따라 동작을 처리할 수 있다
2. 렌더 트리(Render Tree) 생성:
   • DOM과 CSSOM을 결합하여 렌더 트리를 만든다
   • 화면에 그려질 요소들만 포함하는 트리이다 (= 시각적 레이아웃을 구성한다)
   • 이를 통해 브라우저는 어떤 요소가 어떻게 화면에 표시될지를 결정한다
   • 화면에 실제로 표시될 요소들만 포함하기 때문에 display: none; 요소들은 포함되지 않는다. 그러나 visibility: hidden;처럼 화면에서 보이지는 않지만 공간을 차지하는 요소는 렌더 트리에 포함된다
3. 레이아웃(Layout):
   • 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다. 이 단계에서 각 요소의 위치와 차지하는 공간이 결정된다
     
   • 요소는 부모 요소, 형제 요소, 뷰포트 크기 등 다양한 외부 요인에 따라 화면에 어떻게 배치될지가 결정되기 때문에 레이아웃 계산이 필수적이다
     • 브라우저는 CSS 박스 모델(content, padding, border, margin)을 기반으로 요소들이 서로 간에 어떻게 배치될지 결정한다
     • 요소들이 부모-자식 관계나 형제 관계에 의해 배치될 때, 부모 요소의 크기와 위치에 따라 자식 요소들의 배치가 달라진다
     • 그 외 콘텐츠에 따른 크기 조정이나 뷰포트의 크기, 스크롤 위치, 디바이스 해상도 등 외부 요소 영항에 따라
4. 페인팅(Painting):
   
   • 레이아웃 단계에서 각 요소의 크기와 위치가 계산되면 브라우저는 이러한 정보를 바탕으로 각 요소를 실제 픽셀로 변환한다.  이 과정에서 각 요소의 배경 색상, 테두리, 그림자, 텍스트 및 이미지 등이 화면의 픽셀에 그려진다
   • 일반적으로 DOM의 부모 요소부터 시작하여 그 안의 자식 요소를 차례로 페인팅한다 ( 요소들이 겹쳐지거나 오버랩되는 경우, 요소의 z-index 속성에 따라 앞뒤 순서가 결정된다)
   • 현대 브라우저는 GPU(그래픽 처리 장치)를 사용하여 페인팅 과정을 가속화한다. 이를 통해 더 빠르고 효율적인 렌더링이 가능하다 (특히 애니메이션이나 변화가 많은 요소를 그릴 때 유용하다)
5. 합성(Compositing):
   • 페인팅된 레이어를 결합하여 최종적으로 브라우저 화면에 표시하는 과정
   • 웹 페이지의 요소들이 서로 겹칠 수 있기 때문에, 각 요소는 별도의 레이어로 처리된다. 합성 단계에서는 이 레이어들을 결합하여 최종 이미지를 생성한다
   • 현대의 브라우저는 GPU(그래픽 처리 장치)를 사용하여 합성 과정을 가속화한다. GPU는 많은 픽셀을 동시에 처리할 수 있어 성능이 뛰어나다. 이로 인해 복잡한 애니메이션이나 효과를 부드럽게 표현할 수 있다

요약

- 파싱

- 렌더트리 생성

- 레이아웃 생성

- 페인팅

- 합성